What is Less ?

What is Less ?

Today I am going to explain LESS (a CSS pre-processor) in this article.

Less is a pre-processor of CSS and extends the features and capabilities of CSS. Less has many features like – it allow variables, functions, mixins, Nested Rules, Operations, Importing other less files, and many more features (explained in this blog) that generates CSS.

Yes, We write our code in LESS and when it runs it generates CSS.  LESS runs in the browser and can be used on the command line through npm, which is downloaded as a script file for the browser. To install LESS through npm is :

$ npm install -g less

After installation, you can call the compiler through command line :

$ lessc styles.less

This will gives you output to compiled CSS.

To know more about installing LESS, please check out following links:

Compiling Less File With Gulp

How To Install Less And Compile Less File

Now there is a small example to understand LESS into CSS.

a style.less file have code :

@color: #ffffff; // less variable
h2{
    color: @color;
}

h2{
    color: #ffffff;
}

In above example, we create a LESS variable @color and assigned some value.

Wherever we invoke @color variable in LESS file, it will take value #ffffff and generate CSS.

Now some features of LESS are :

Variables are same as in any other programming language in LESS. We define Variable with some constant value and that variable can be used any where to generate CSS, like I already gave an example above using variable.

e.g.

@border-width: 2px;
@border-color: #000;
@container-solid-border: @border-width solid @border-color;

div{
    height: 10px;
    width: 10px;
    border: @container-solid-border;
}

And the CSS for above will be :

div{
    height: 10px;
    width: 10px;
    border: 2px solid #000;
}

Mixins are a feature to include group of properties from a rule-set to another rule-set. Or we can say that a rule that can be used in multile CSS selectors.

So for e.g.,

we have a class .button with rules:

.button{
    background-color: #E1BEE7;
    color: #000;
}

Now the .button class can be used under many selectors like:

a.menu{
    padding: 10px;
    .button;
}
button.btn{
    padding: 5px;
    margin: 5px;
   .button(); //(is optional)
}

so the CSS will be gnerate as :

a.menu{
    padding: 10px;
    background-color: #E1BEE7;
    color: #000;
}
button.btn{
    padding: 5px;
    margin: 5px;
    background-color: #E1BEE7;
    color: #000;
}

To import another LESS file use syntax :

@import "style.less";

Nesting is very easy with LESS. Lets take an example of CSS, i.e. we have to write following CSS into LESS:

CSS e.g :

.container div button{
    padding: 10px;
    width: 100px;
    color: red;
}
.container div button a{
    background-color: #000;
}

Now, Less for above CSS is :

.container{
    div{
        button{
            padding: 10px;
            width: 100px;
            color: red;
           a{
                background-color: #000;
            }
        }
    }
}

As you can see that in CSS, we have to write many times if we use nesting, but in Less we can use single time that class with feature of Nesting.

Here is another example for using  & selector which indicates the current selector parent.

Less e.g.

.container{
    div{
        button{
            padding: 10px;
            width: 100px;
            color: red;
            a{
                background-color: #000;
                &:hover{
                    background-color: #2e2e2e;
                }
            }
        }
    }
}

This will compile CSS as :

.container div button a:hover{
    background-color: #2e2e2e;
}

We can also do arithmetical operations (+, -, *, /) on any number, color or variable.
For e.g:

@width: 100px;
@container-width: @width + 10px; // output as 110px
@container-height: 5%;
@inner-container: @container-height * 5%; // output as 25%
@color:#224488 / 2; //output as #112244

There are some predefined functions in less library, we can use that. Or we can create our own functions according to our need.

Lets take an example to lighten a color.

so we have a function in less lighten(color, parameter);

e.g.:

@color: @000;
@light-color: lighten(@color, 5%);

So this will lighten your color by 5%.

There is also a function percentage, which gives you result in percentage.

e.g.:

@width: 0.7;

div{
    width: percentage(@width); //outputs as 70%
}

To define your functions please take a look at following example to return average:

.average(@x, @y) {
    @average: ((@x + @y) / 2);
}
div {
    .average(16px, 50px); // "call" the mixin (function) with two parameters and results as 33px.
    padding: @average; // use its "return" value
}

Less also supports Lazy Loading feature, like in the file you may define your variables anywhere, like before or after the use of variable.

That’s all in this article, hope it will help you to use LESS. Try this and if you have any query then just comment below. 🙂