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 used to enhance and compile CSS so that web browsers may use it. It is also a CSS language extension that provides features like variables, functions, mixins, and operations that let us create dynamic CSS while yet keeping backward compatibility.

The LESS Variables, as they are called, control the common values used in a specific area and can be used anywhere inside the definition of code. LESS can be used with these variables to change a certain value throughout the entire code. Using variables makes it easier when we need to change a certain value in our CSS code, which can be difficult otherwise.

Variables in Less are generally used in storing values and are used repetitively in the less code. But not only values but attributes of different nature are interpolated with variables and used likewise. There are four places where variables can be used:

Selector’s Name: We can store the names of selectors in variables and use them before CSS rules.

Syntax:

@var: sel;

.@{var} {
    ...
}

URLs: We can also store the whole or a part of a path/directory inside the variables.

Syntax:

@var: "URL_name"

sel{
    property: url("@{var}")
}

Import Statements: We can also store the whole or a part of a path/directory inside the variables for importing files from that location.

Syntax:

@var: "URL_name"

@import "@{var}/...";

Properties: Like selectors, we can also store names of properties inside the variables and we can use them repetitively.

Syntax:

@var: property_name;

selector {
  @{var}: value;
 
}

To know how to Compile LESS code into CSS code open this. 

Example 1: The example below shows the interpolation of variables in the Selector’s Name and URLs.

styles.less:

1.png: 

 

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

lessc styles.less styles.css

The compiled CSS file comes to be:

styles.css:

Output:

 

Example 2: The example below shows the interpolation of variables in Import Statements and Properties.

style.less:

test.less: This is the less file that is being imported.

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:

Output:

 

Reference: https://lesscss.org/features/#variables-feature-variable-interpolation