Less.js Lazy Variables Evaluation

Last Updated : 29 Nov, 2022

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