An Introduction to Less CSS

LESS extends the behavior of regular CSS. It is a Javascript library that allows you to include dynamic behaviors in CSS. For example, using LESS, you can add varibales and functions to CSS. These functions allow you to do mathematical calculations with your CSS. Another advantage of using LESS is that it decreases the amount of CSS code, you write.

How LESS Works

LESS uses files with the “.less” extension, for example style.less. LESS works by including the LESS Javascript library in the HTML page (for a client-side installation). However, you can also use server-side compilers that use PHP, Java, Python and Ruby. Here is an example using Javascript (client-side):

< link rel="stylesheet/less" type="text/css" href="styles.less">
< script src="less.js" type="text/javascript">

Make sure you include your stylesheets before the script.

LESS Features

LESS has the following features:

• Variables: LESS allows you to define variables using the @ sign. The scope of a variable is limited to the file it is declared in.
• Mixins: They can be defined as classes for other CSS classes. Mixins can be thought of as custom functions or rules that can be reused.
• Functions & Operations: Functions within LESS allow you to do various things such as adding subtracting and changing colors. Operations allow you to do Math within CSS.
• Nested Rules: Nested rules are simply classes within classes which allow your CSS to be organized better. And decreasing the amount of CSS you write.

Examples

Varibales

@blue: #00c;
@anewcolor: @blue + #246;

In this example, we are creating a variable blue  and later we are adding a hex value to the variable, to  create a new color.

Mixins

.border {
border-top: 1px solid #233;
}
.paragraph {
background: #eee;
.border;
}
.box {
background: #2cd;
.border;
}

In this example, the paragraph and box class both share a border that was declared in the .border mixin.

Nested Rules

This is an example of the nested rules as posted on lesscss.org

Functions

These are a few of the functions that are available in LESS. Basically, they do what their name implies.

     lighten(@blue, 10%);
     desaturate(@blue, 10%);
     mix(@color1, @color2);
     fade(@color, 50%);

Operations

Here are some examples of the operations that can be performed in LESS

@Padding: 10px;
@doublePadding: @Padding * 2;

@fullPost: 960px;
@halfPost: @fullPost / 2;
@halfOfHalf: (@fullPost / 2) / 2;

LESS is a nice tool. It can save developers front-end development time. If anyone has used LESS intensively, please provide feedback on the impact it has had on your development time.