In LESS, variables are reusable predefined styles.
They make our work faster and convenient, because we don’t have to write the same code all over again.
@variable-name: value;
We can assign a name of our choice to the variable and set its value to any CSS style’s value that you wish to use later on in your project.
LESS Variables can be used by including the variable name in our desired elements styling.
We have declared a variable with a sea blue color.
@my-color: #428bca
We’ll use it to declare the background a class .my-div. Next, we call our variable while styling the class.
.my-div{background-color: @my-color;}
The above code will return the class .my-div with a background color of sea blue.
Note: We have to compile the LESS file into the CSS file. We can do that by running the below command in the terminal.
npm lessc nameoflessfile.less nameofcssfile.css