Less.js Variables Overview

Last Updated : 22 Aug, 2022

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.

Syntax:

@variable_name: value;

Parameter values:

@variable_name: It represents any variable name having some meaning to it.
value: It represents any assigned numeric value, dimension, or any value depending on the use.

Example 1: This example describes the basic use of the Variables in LESS.js.

HTML

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8">     <link rel="stylesheet"            type="text/css"            href="style.css">     <meta name="viewport"            content="width=device-width,                     initial-scale=1">     <title>LESS_Variables</title> </head>  <body>     <h1>Variables in LESS </h1>     <p>         variables in LESS has same functionalities          as any other programming language does.     </p>     <p>         we are going to change the color of heading          and the background color of the paragraphs.         you can have as many different colors of your          choice as possible. this is what makes the use          of variables so handy.     </p> </body> </html>

style.less

@color_for_text: red; @color_for_background: lightgreen;  h1{     color: @color_for_text; } p{ color: @color_for_text;     background-color: @color_for_background; }

style.css

h1 { color: red; } p { color: red; background-color: lightgreen; }

Command to compile :

lessc style.less style.css

Output: After compiling is done, the following output will be displayed.

Example 2: This is another example that describes the implementation of the LESS.js Variables.

HTML

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8">     <link rel="stylesheet"            type="text/css"            href="style.css">     <title>LESS_Variables code2</title> </head>  <body>     <h1>GeeksforGeeks</h1>  </body> </html>