Less.js Variable Interpolation
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. 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.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="styles.css"/>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3><b>Less.js Variable Interpolation</b></h3>
<div class="container">
</div>
</body>
</html>
styles.less:
CSS
@body-bg-color: #eeeeee;
@text-color: rgb(0, 200, 100);
@container-bg: rgb(220, 43, 55);
@image: "1.png";
@var: container;
body {
background: @body-bg-color;
}
.@{var}{
height:200px;
width: 450px;
background: url("@{image}");
}
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:
CSS
body {
background: #eeeeee;
}
.container {
height: 200px;
width: 450px;
background: url("1.png");
}
Output:
Example 2: The example below shows the interpolation of variables in Import Statements and Properties.
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 Variable Interpolation</b></h3>
<div class="container">
<p class="text">GeeksforGeeks</p>
</div>
</body>
</html>
style.less:
CSS
@var: "test.less";
@import "@{var}";
test.less: This is the less file that is being imported.
CSS
@body-bg-color: #eeeeee;
@text-color: rgb(0, 200, 100);
@container-bg: rgb(220, 43, 55);
@var: color;
body {
background: @body-bg-color;
}
.container{
height:200px;
width: 400px;
background-@{var}: (#00821e);
}
.text {
padding: 70px 0px 0px 95px;
@{var} :yellow;
font-size: 2rem;
}
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: #eeeeee;
}
.container {
height: 200px;
width: 400px;
background-color: #00821e;
}
.text {
padding: 70px 0px 0px 95px;
color: yellow;
font-size: 2rem;
}
Output:
Reference: https://lesscss.org/features/#variables-feature-variable-interpolation
Similar Reads
Less.js Lazy Variables Evaluation
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 usa
3 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 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 Installation
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
String Interpolation in JavaScript
These are the following ways to interpolate the given strings:1. Template Literals (ES6)Template literals are the most modern and preferred method for string interpolation in JavaScript. They use backticks (`` ` ``) and ${} syntax to embed expressions.JavaScriptconst n = "Alice"; const res = `Hello,
2 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
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 Extend Selector Interpolation with Extend
LESS is a simple CSS pre-processor that makes it possible to create manageable, customizable, and reusable style sheets for websites. LESS is a dynamic style sheet language that increases the working power of CSS. LESS is cross-browser compatible. CSS pre-processor is a scripting language that impro
2 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
Less.js Logical boolean() Function
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 improves CSS's functionality. Cross-browser interoperability is supported by LESS. A scripting language known as CSS pre-
3 min read