Less.js Browser Modify Variables
Last Updated :
28 Apr, 2025
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 our LESS variables in the runtime that is in the browser. To modify variables, we use the "less.modifyVars" function which takes in an object containing the key as the variable name and value as the new value of that variable that needs to be set.
When we update the variables, the Less file is recompiled without reloading the browser and the changes are made as specified within the function.
Syntax: The syntax of the "less.modifyVars" function is as follows:
less.modifyVars({
"<variable-name>": "<value>"
})
Parameters:
- object: An object of key-value pairs where key (of type string) is the name of the variable and value (of type string) is the new value of that variable which is to be set.
Example 1: In this example, we have defined 2 variables in our styles.less file that is @primary and @secondary and their respective values are yellow and green. Then in our index.html file, we used the "less.modifyVars" function to change the value of @primary and @secondary colors to red and blue respectively and obtained the output.
index.html: The HTML code is as follows:
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>
GeeksforGeeks | Less.js Browser Modify
Variables
</title>
<link rel="stylesheet/less"
type="text/css" href="styles.less" />
</head>
<body style="font-family: sans-serif;">
<h1 style="color: springgreen;">
GeeksforGeeks
</h1>
<h3>Less.js Browser Modify Variables</h3>
<p class="primary">I am primary color</p>
<p class="secondary">I am secondary color</p>
<script>
less.modifyVars({
"@primary": "blue",
"@secondary": "red"
})
</script>
</body>
</html>
styles.less: The LESS code is as follows:
CSS
// styles.less
@primary: yellow;
@secondary: green;
.primary{
color: @primary;
}
.secondary{
color: @secondary;
}
Syntax: To compile the above LESS code into normal CSS, run the following command:
lessc styles.less styles.css
styles.css: The output CSS file looks like this:
CSS
.primary {
color: yellow;
}
.secondary {
color: green;
}
Output: The output of the above code is as follows:
Example 1: Output of Less.js Browser Modify Variables
Example 2: In this example, we use the above function to modify the value of the variables @background, @foreground, and @stylish to "#242B2E", "#FF6666" and "fantasy" respectively, and obtain the output.
index.html: The HTML code is as follows:
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>
GeeksforGeeks | Less.js Browser Modify
Variables
</title>
<link rel="stylesheet/less"
type="text/css" href="styles.less" />
</head>
<body style="font-family: sans-serif;">
<h1 style="color: springgreen;">
GeeksforGeeks
</h1>
<h3>Less.js Browser Modify Variables</h3>
<div class="stylish">
I am stylish division
</div>
<script>
less.modifyVars({
"@background": "#242B2E",
"@foreground": "#FF6666",
"@stylish": "fantasy"
})
</script>
</body>
</html>
styles.less: The Less code is as follows:
CSS
// styles.less
@background: black;
@foreground: white;
@stylish: serif;
@width: 300px;
@padding: 10px;
.stylish{
font-family: @stylish;
background-color: @background;
color: @foreground;
width: @width;
padding: @padding;
}
Syntax: To compile the above LESS code into normal CSS, run the following command:
lessc styles.less styles.css
styles.css: The output CSS file looks like this:
CSS
.stylish {
font-family: serif;
background-color: black;
color: white;
width: 300px;
padding: 10px;
}
Output: The output of the above code is as follows:
Example 2: Output of Less.js Browser Modify Variables
Reference: https://lesscss.org/usage/#using-less-in-the-browser-modify-variables
Similar Reads
Less.js Variables Overview 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
2 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
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 Properties as 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 Variables Multiple & Selector 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