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> neveropen | 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;"> neveropen </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> neveropen | 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;"> neveropen </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
