Less.js Lazy Variables Evaluation
Last Updated :
28 Apr, 2025
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that boosts the functionality of CSS. Cross-browser interoperability is offered via LESS. CSS is improved and compiled for usage by web browsers using a programming language called CSS pre-processor. Additionally, it is a CSS language extension that offers tools like variables, functions, mixins, and operations that enable us to construct dynamic CSS while yet maintaining backward compatibility.
The LESS Variables, as they are known to hold values stored in them and can be used anywhere within the definition of code, js govern the common values used in a single area. These variables can be used with LESS to alter a certain value throughout the entire code. When we need to modify a certain value in our CSS code, it may become challenging, but using variables makes it simple.
Lazy Variables Evaluation means that the variables in Less do not need to be declared before being used. When a variable is defined more than once, the most recent definition is used, working up from the current scope. This is analogous to how CSS works, where the value of the last property inside a definition is determined.
Syntax:
.sel {
property: @var2;
}
@var2: @var1;
@var1: value;
There is no specific parameter for this functionality.
To know how to Compile LESS code into CSS code open this.
Example 1: The example given below demonstrates how the usage of a @cond variable and using it in a boolean function before defining or even declaring it.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css"/>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3><b>Less.js Lazy Variables Evaluation</b></h3>
<div class="c1">
<p class="p1">
<strong>
GeeksforGeeks
</strong>
</p>
</div>
</body>
</html>
style.less:
CSS
@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@val: 30%;
body {
background-color: @body-bg-color;
}
.c1 {
width: @val;
height: 250px;
margin: 1rem;
background-color: if(@cond, @dark, @light);
}
.p1 {
padding: 100px 0px 0px 140px;
color: if(@cond, @light, @dark);
font-size: @val * 5;
}
@cond: boolean(ispercentage(@val));
Now, to compile the above LESS code to CSS code, run the following command:
lessc style.less style.css
The compiled CSS file comes to be:
style.css:
CSS
body {
background-color: #eeeeee;
}
.c1 {
width: 30%;
height: 250px;
margin: 1rem;
background-color: hsl(25, 71%, 8%);
}
.p1 {
padding: 100px 0px 0px 140px;
color: #fdff92;
font-size: 150%;
}
Output:
Example 2: The code below demonstrates how the final value assigned to a variable is the main value that is allotted to the variable after the code is compiled in Lazy Evaluation.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css"/>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3><b>Less.js Lazy Variables Evaluation</b></h3>
<div class="c1">
<p class="p1">
<strong>
GeeksforGeeks
</strong>
</p>
</div>
</body>
</html>
styles.less:
CSS
@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@val: 30%;
body {
background-color: @body-bg-color;
}
.c1 {
width: 450px;
height: @val;
margin: 1rem;
background-color: if(@cond, @dark, @light);
}
.p1 {
padding: 100px 0px 0px 140px;
color: if(@cond, @light, @dark);
font-size: @val * 0.1;
}
@cond: boolean(ispercentage(@val));
@val: 15rem;
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less style.css
The compiled CSS file comes to be:
style.css:
CSS
body {
background-color: #eeeeee;
}
.c1 {
width: 450px;
height: 15rem;
margin: 1rem;
background-color: #fdff92;
}
.p1 {
padding: 100px 0px 0px 140px;
color: hsl(25, 71%, 8%);
font-size: 1.5rem;
}
Output:
Reference: https://lesscss.org/features/#variables-feature-lazy-evaluation
Similar Reads
Less.js Variable Interpolation
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. This dynamic style sheet language gives CSS more functionality. LESS provides interoperability across browsers. A programming language called CSS pre-processor is
3 min read
Less.js Variables
LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a s
4 min read
Less.js Variables Default Variables
LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a s
3 min read
JS++ | Variables and Data Types
In this tutorial, we will introduce variables in JS++. Let’s start with an example. Create a new folder and name it "Variables". Then create a new file and name it "Variables.jspp". Write in the following code: external $; string firstString = "This is a string."; int firstInt = 1; double firstDoubl
6 min read
Less.js Variables Combinatorial Explosion
LESS works as an extension to the regular CSS and gives it some additional features to work with. , which is used to generate all possible combinations of the selector's list which are separated by a comma. In this article, we are going to learn about the combinatorial explosion which is available i
3 min read
Less.js @import At-Rules less
In this article, we will see that Less.js @import At-Rules is basically used to import the file which is in the source code. And we can put the @import statement anywhere in the source code. And @import At-Rules allow us to spread the less code over to different files. Using the @import keyword we c
2 min read
Less.js Misc default() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS is a dynamic style sheet language, it is preferred. LESS is adaptable, so it works with a wide range of browsers. Only CSS that has been created and proc
3 min read
Less.js Logical Functions
In this article, we will see the Logical Functions in LESS.js. Logical functions are a way to perform operations and evaluate code based on logical conditions. Basically, these functions provide the power of "if-else" conditions in CSS and help us do things based on logic. There are 2 logical functi
3 min read
Less.js String e() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS is a dynamic style sheet language, it is preferred. Because LESS is adaptable, it can be used by a variety of browsers. Only CSS that has been created an
3 min read
Less.js Browser Modify Variables
LESS (Leaner Style Sheets) Â is an extension or superset to the CSS, which basically enhances the abilities of normal CSS and provides it with programmable superpowers like variables, functions, loops, various methods to do certain tasks, etc. In this article, we are going to take a look at updating
3 min read