CSS Preprocessor | LESS

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;
@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;}
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;        }    }}
.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;}
.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);}
@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.
CSS-Misc
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array