CSS Preprocessor LESS
Last Updated :
08 Feb, 2023
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:
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 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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...