Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

less
variables
communitycreator
css

What are the LESS variables?

Akande Olalekan Toheeb

Overview

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.

Syntax

@variable-name: value;
Defining LESS variables

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.

Usage

LESS Variables can be used by including the variable name in our desired elements styling.

Example

We have declared a variable with a sea blue color.

@my-color: #428bca
Defining the color

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;
}
Setting the background colour

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
Compiling the LESS file

RELATED TAGS

less
variables
communitycreator
css

CONTRIBUTOR

Akande Olalekan Toheeb
RELATED COURSES

View all Courses

Keep Exploring