Skip to content
Related Articles

Related Articles

Improve Article

CSS Preprocessor | LESS

  • Last Updated : 27 May, 2020

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




      @lt-gray: #ddd;
      @background-dark: #512DA8;
      @carousel-item-height: 300px;
    • Mixins: Mixins are a way of including a bunch of properties from one rule-set into another rule-set.




      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;
      }
    • Nesting: LESS gives you the ability to use nesting.




      .carousel {
          background:@background-dark;
        
          .carousel-item {
              height: @carousel-item-height;
              img {
                  position: absolute;
                  top: 0;
                  left: 0;
                  min-height: 300px;
              }
          }
      }
    • Mathematical Operations: Arithmetical operations +, -, *, / can operate on any number, color or variable.




      .carousel-item {
          height: @carousel-item-height;
      }
        
      .carousel-item .item-large {
          height: @carousel-item-height *2;
      }
    • Functions: LESS provides a variety of functions like math, list, string, color operations, color blending etc.




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

    Example: File name gfg.html




    <!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>                                      

    File name style.less




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

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




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

    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
Recommended Articles
Page :