CSS Preprocessor LESS

Last Updated : 04 Jul, 2024

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