Cascading Style Sheet (CSS) is undoubtedly the greatest companion of HTML Developers. It beautifies your HTML web sites and web apps the way you want. But what if you can get more out of CSS by writing some LESS.

LESS is a dynamic stylesheet language. The styles defined in LESS can be dynamic. Their result can vary depending upon the conditions you define. LESS supports several features like variables, mixins, functions, nesting, operators, etc

There are three ways to use LESS :

1. Client-Side

   LESS allows real-time compilation via LESS.js by the browser. Write your LESS code and include it in your head tag. Then include the LESS.js in your head tag. Remember to include your stylesheets before the script

2. Server-Side

   If you are using Node.Js or Rhino, you can also use LESS at server side.

3. Compiling LESS

   If you don’t want to use LESS at server side or to compile it at run time at client side, you can also compile your LESS code into CSS code. Install the LESS compiler using npm and compile your LESS files using LESS Compiler named lessc

   lessc styles.less styles.css

To understand more about LESS, we will create three nice looking buttons using LESS.

The Final result will be like this

The Source Code is here

style.less

//Variables
@base-color: #E5F5FB;
@font-size: 16px;
@size: 4px;

//Define the colors
@light-blue: #5AC1E4;
@dark-blue: #0DA4D8;
@dark-pink: #BB4E75;
@darker-pink: #992E58;
@light-green: #99AF5E;
@dark-green: #75A61F;

//Page body
body
{
    background-color: @base-color;
    font-family: 'Josefin Sans', sans-serif;
}

//Base style for button and text classes
.base_button
{
    border-radius: @size;
    display: inline-block;
    font-size: @font-size;
    color: #fff;
}

//Class button
.button(@base, @hover)
{
    //Inherit the base_button class
    .base_button;
    background-color: @base;
    padding-bottom: @size;

    //child element with class text inside class button
    .text
    {
        .base_button;
        background-color: @hover;
        padding: @size+4;
        
        //On Mouse hover
        &:hover
        {
            position: relative;
            top: -1px;
        }
    }
}

//Element with ID = blue-button
#blue-button
{
    .button(@dark-blue, @light-blue);
}

//Element with ID = pink-button
#pink-button
{
    .button(@darker-pink, @dark-pink);
}

//Element with ID = green-button
#green-button
{
    .button(@dark-green, @light-green);
}

index.html

Buttons Created With LESS

Click Me  
Click Me  
Click Me

To run it, compile the LESS file with lessc

Here we created some variables in the starting. Variables are defined with @ symbol to which value is assigned with colon(:). To use a variable, simply write its name with prefix @.

Next we created mixins. With mixins, you can embed properties of one class into another class. In .button class I have embedded .base_button class.

LESS also allows parametric mixins. With parametric Mixins you can take arguments. In .button class I have declared two arguments named @base and @hover. They will get replaced with the value passes at compile time.

In .button class you will observe that, .text class has been defined. This is called Nesting, declaring a class inside of another class. On run time, any  HTML element with class text inside any element with class button will automatically obtain the .text class style. LESS also supports selectors through & symbol. In the above example I have declared &:hover to select the hover style of the class text.

In class text, you will notice, padding is set equal to @size+4. This is an example of operators in LESS. The padding will set to @size+4 i.e 4px + 4 = 8px;

The above example is a very small demonstration of LESS, but you can do more with LESS.

Resources :
http://en.wikipedia.org/wiki/LESS_(stylesheet_language)
http://lesscss.org/