Less.js Variables

Last Updated : 06 Apr, 2023

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 scripting language that improves CSS and gets compiled into regular CSS syntax so that it can be used by the web browser. It is also a backward-compatible language extension for CSS that provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.

Description for variables: The Variables in LESS.js govern the common values used in a single location, ie, they are known to keep values stored in them and can be used anywhere within the definition of code. LESS allows you to use these variables to change the specific value in the entire code. It might get troublesome when we need to change one particular value in our CSS code, but with the help of variables, it can easily be done.

Variables in less:

Overview: Variables make our code easier to maintain by giving you a way to control those values from a single location:

Syntax:

a,
.link {
    color:blue;
}

Variable Interpolation: Variable interpolation is the process of evaluating an expression or literal containing one or more variables, yielding output in which the variables are replaced with their corresponding values. The variables can also be used in other places like selector names, property names, URLs, and @import statements.

Syntax:

@my-selector: banner;

.@{my-selector}
{
   //property values
}

Variable Variables: In Less.js, we can define a variable’s name using another variable.

Syntax:

@primary-color: blue;
@bgcolor: red;

.section 
{
  @color: primary-color;

  .element 
  {
     color: @@color;
  }
}

Lazy Evaluation: In lazy evaluation, the variables do not have to be declared before being used.

Syntax:

.lazy-eval
{
    height: @va;
}

Properties as variables (NEW!): In properties as variables (NEW), You can easily treat properties like variables using the $prop syntax. Sometimes this can make your code a little lighter.

Syntax:

.widget
{
  color:blue;
  background-color: $color;
}

Default variables: The default variable has the ability to set a variable only when it’s not already set. This feature is not required because variables can be easily overridden by defining them afterward.

Syntax:

@color:red;

// first declaration of @color
@import "style.less"; 
// this will override @color defined previously
@color: green; 
p {
   color : @color;
}

Example 1: This example demonstrates the use of the default variable in Less.js.

Filename: index.html

html

<!DOCTYPE html> 
<head> 
    <link rel="stylesheet"
        href="Three.css" type="text/css" /> 
</head> 
<body> 
    <div><br><br> 
        <h1>Welcome to GeeksforGeeks</h1> 
        <h3><b>Less.js Variable</b></h3> 
    </div> 
</body> 
</html> 

Filename: One.less

CSS

@color: red;

Filename: Two.less

CSS

@import "One.less";  
@color: green;  
@normal:black; 
h1
{ 
   text-align: center; 
   color : @color; 
} 
h3
{ 
   text-align: center; 
   color: @normal;    
}

Now, to compile the above LESS code to CSS code, run the following command:

less Two.less Three.css

The compiled CSS file comes to be:

Filename: Two.css

CSS

h1 { 
    text-align: center; 
    color: green; 
} 
h3 { 
    text-align: center; 
    color: black; 
} 

Output:

Example 2: The following example, demonstrates the use of variables in Less.js.

Syntax:

@my-selector: banner;

.@{my-selector}

Filename: index.html

html

<!DOCTYPE html> 
<head> 
    <link rel="stylesheet"
        href="style.css" type="text/css" /> 
</head> 
<body class="banner3"> 
    <div><br><br> 
        <h1 class="banner">Welcome to GeeksforGeeks</h1> 
        <h3 class="banner2"><b>Less.js Variable</b></h3> 
    </div> 
</body> 
</html> 

Filename: style.less

css

@primary:black; 
@color:green; 
@normal:white; 
@my-selector: banner; 
@hello:banner2; 
@one:banner3; 
  
.@{my-selector} { 
    font-weight: bold; 
    line-height: 20px; 
    color: @color; 
    margin: 0 auto; 
    text-align: center; 
} 
.@{hello} { 
    text-align: center; 
    color: @normal; 
} 
.@{one}{ 
    background-color: @primary; 
}

Now, to compile the above LESS code to CSS code, run the following command:

less styles.less style.css

The compiled CSS file comes to be:

Filename: style.css

css

.banner { 
    font-weight: bold; 
    line-height: 20px; 
    color: green; 
    margin: 0 auto; 
    text-align: center; 
} 
.banner2 { 
    text-align: center; 
    color: white; 
} 
.banner3 { 
    background-color: black; 
} 