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 style.less style.css.
• Include the compiled CSS file in the html file.

Features:

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

style.less

CSS

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

Syntax: To compile the above less code to CSS code write the following command-

lessc style.less style.css

The compiled CSS file comes to be: 

style.css

CSS

h1 {
  color: #ddd;
  background: #512DA8;
}

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

style.less

CSS

zero-margin {
    margin:0px auto;
    background: white;
}

.row-header {
    margin:zero-margin;
    padding:0px auto;
}

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

Syntax: To compile the above less code to CSS code write the following command-

lessc style.less style.css

The compiled CSS file comes to be: 

style.css

CSS

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

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

style.less

CSS

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

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

Syntax: To compile the above less code to CSS code write the following command-

lessc style.less style.css

The compiled CSS file comes to be: 

style.css

CSS

.carousel {
  background: #512DA8;
}
.carousel .carousel-item {
  height: 300px;
}
.carousel .carousel-item img {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 300px;
}

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

style.less

CSS

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

.carousel-item {
    height: @carousel-item-height;
}

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

Syntax: To compile the above less code to CSS code write the following command-

lessc style.less style.css

The compiled CSS file comes to be: 

style.css

CSS

.carousel-item {
  height: 300px;
}
.carousel-item .item-large {
  height: 600px;
}

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

style.less

CSS

@base:0.5;
@width: 0.8;

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

Syntax: To compile the above less code to CSS code write the following command-

lessc style.less style.css

The compiled CSS file comes to be: 

style.css

CSS

.class {
  width: 80%;
  color: saturate(0.5, 5%);
  background-color: light(0.5, 25%), 8;
}

Example: File name gfg.html

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

CSS

@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

CSS

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.