Reading list Switch to dark mode

    What is Less ?

    Updated 28 March 2024

    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.

    Searching for an experienced
    Magento Company ?
    Find out More

    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

    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

    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;
    }

    Import Statements

    To import another LESS file use syntax :

    @import "style.less";

    Nested Rules

    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;
    }

    Operations

    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

    Functions

    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. 🙂

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    1 comments

  • Use of LESS in magento 2
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content