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 ; h 1 { 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
h 1 { 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 w3wiki. < 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.