CSS Preprocessor | LESS

LESS stands for Leaner Style Sheets. It is a backward-compatible language extension for CSS. It allows us to use features like variables, nesting, mixins, etc, all in a CSS-compatible syntax. LESS is influenced by SASS and has influenced the newer “SCSS” syntax of SASS. LESS was used in Bootstrap 3 but was replaced by SASS in Bootstrap 4.

Pre-Requisites:

  • HTML
  • CSS
  • System Requirements

    • Operating System: Cross-platform
    • Browser Support: IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

    File Type: All LESS files must have the .less file extension.

    Working: A web browser does not understand the LESS code itself. That is why you will require a LESS pre-processor to change LESS codes into simple standard CSS code.



    Working Steps:

    • Write the LESS code in a file.
    • Compile the LESS code into CSS code using the command lessc input.less output.less.
    • Include the compiled CSS file in the html file.

    Features:

    • Variables: Variables can be used to store CSS value that may be reused. They are initialized with @.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      @lt-gray: #ddd;
      @background-dark: #512DA8;
      @carousel-item-height: 300px;

      chevron_right

      
      

    • Mixins: Mixins are a way of including a bunch of properties from one rule-set into another rule-set.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      zero-margin {
          margin:0px auto;
          background:@white;
      }
        
      .row-header {
          .zero-margin;
          padding:0px auto;
      }
        
      .row-content {
          .zero-margin;
          border-bottom: 1px ridge;
          min-height:400px;
          padding: 50px 0px 50px 0px;
      }

      chevron_right

      
      

    • Nesting: LESS gives you the ability to use nesting.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      .carousel {
          background:@background-dark;
        
          .carousel-item {
              height: @carousel-item-height;
              img {
                  position: absolute;
                  top: 0;
                  left: 0;
                  min-height: 300px;
              }
          }
      }

      chevron_right

      
      

    • Mathematical Operations: Arithmetical operations +, -, *, / can operate on any number, color or variable.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      .carousel-item {
          height: @carousel-item-height;
      }
        
      .carousel-item .item-large {
          height: @carousel-item-height *2;
      }

      chevron_right

      
      

    • Functions: LESS provides a variety of functions like math, list, string, color operations, color blending etc.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      @width: 0.8;
        
      .class {
          width: percentage(@width); // Returns `80%`
          color: saturate(@base, 5%);
          background-color: spin(lighten(@base, 25%), 8);
      }

      chevron_right

      
      

    Example: File name gfg.html

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
        <head
            <meta charset="utf-8"/> 
              
            <title>LESS</title
              
            <meta name="viewport" content
                "width=device-width, initial-scale=1"
                  
            <link rel="stylesheet" href="./css/style.css"
        </head
          
        <body
            <div class="head">Welcome to GeeksforGeeks. 
                <ul class="list"
                    <li class="a">Algo</li
                    <li>DS</li
                    <li class="a">Languages</li
                    <li>Interviews</li
                    <li>CS subjects</li
                </ul
            </div>     
        </body
    </html>                                      

    chevron_right

    
    

    File name style.less

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @color-primary: #009900;
    @font-pri: Sans-Serif;
    @font-sec: Helvetica;
      
    body{
        color: @color-primary;
        font-size: 40px;
    }
      
    .list{
        font-family: @font-pri;
        font-size: 20px;
        .a{
            font-family: @font-sec;
            font-size: 10px;
        }
    }

    chevron_right

    
    

    File name style.css which we get after transpiling style.less

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    body {
      color: #009900;
      font-size: 40px;
    }
    .list {
      font-family: Sans-Serif;
      font-size: 20px;
    }
    .list .a {
      font-family: Helvetica;
      font-size: 10px;
    }

    chevron_right

    
    

    Output:

    Advantages:

    • LESS is cross-browser compatible.
    • LESS provides a list of operators making it easy for users to code.
    • Maintenance is easy due to the use of variables.

    Disadvantages:

    • LESS provides fewer frameworks as compared to SASS.
    • It can be tricky to those who are new to CSS.



    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.