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>

style.less

@color_text:green;
@color_background:black;
body{
  background-color: @color_background;
}
h1{
  color: @color_text;
}

style.css

body {
  background-color: black;
}
h1 {
  color: green;
}

Now, compile the less file into a CSS file and the following output will be displayed:

Output:

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

Less.js Variables Properties as Variables

yarudalbasharmacse17

Improve

Article Tags :

Less.js Variables Overview

Similar Reads

Thank You!

What kind of Experience do you want to share?