Skip to content
Related Articles

Related Articles

CSS Preprocessor | LESS

View Discussion
Improve Article
Save Article
  • Last Updated : 27 May, 2020
View Discussion
Improve Article
Save Article

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.


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


    • 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;
      .row-header {
          padding:0px auto;
      .row-content {
          border-bottom: 1px ridge;
          padding: 50px 0px 50px 0px;

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

      .carousel {
          .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> 
            <meta charset="utf-8"/> 
            <meta name="viewport" content
                "width=device-width, initial-scale=1"
            <link rel="stylesheet" href="./css/style.css"
            <div class="head">Welcome to GeeksforGeeks. 
                <ul class="list"
                    <li class="a">Algo</li
                    <li class="a">Languages</li
                    <li>CS subjects</li

    File name style.less

    @color-primary: #009900;
    @font-pri: Sans-Serif;
    @font-sec: Helvetica;
        color: @color-primary;
        font-size: 40px;
        font-family: @font-pri;
        font-size: 20px;
            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;



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


    • 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 :

Start Your Coding Journey Now!