Learning of Less CSS Variables Creation and Uses

July 28th, 2017 . 4 minutes read
Blog featured image

In this post, I am describing Less CSS Variables Creation and Uses. Let’s have a complete learning about CSS variables like their uses and functionality.

Less it means “Leaner Style Sheets”, it is backend compatible extension. It is dependent on less.js which helps in run less and convert to last position CSS file.

Let’s learn Less variables in a very simple way, we will discuss many uses of them.

Less CSS Variable Overview:

Less variables it means in the same values not repeat in the same file or you can write only one time in another file and if you change that variable value then it will change automatically everywhere you used.

Let’s have Some examples for better understanding :

> How code looks in normal CSS

> How code looks in less CSS
First of all, let’s define a variable

Interpolation Less variable:

We have described simply less variable in above example, where values controlled by Less variables. Same as values we can also manage class, id and CSS elements with the help of variables.

> Now let’s create variables:

> How to use created variable-

It’s time to manage URLs:

It will work directly by changing background URL and img src with created variables.

> Now let’s create variables:

> How to use created variable-

URLs Import Statements:

If you want to import files then you can simply add the path for importing files in variables, it will automatically access the file folder. You can use this variable in import tag. You can use shorter code to get many files easily with the help of variables.

> Now let’s create variables:

> How to use created variable-

Variable Names:

You can define variables with a variable name.

> Now let’s create variables:

> How to use created variable-

Lazy Evaluation:

Lazy Evaluation variable is also a part of less variable. We can use a variable without deceleration, It means variables are lazy evaluated.

> How to create Less variables:

> Now let’s create lazy evaluation Less variables:

> So, the output will be:

when we give the same variable twice in the definition then the latest one or the last one will be applicable. This will be same CSS and less CSS.

Default Variables:

when you want to overwrite a variable fro the imported file you can overwrite them easily. Like in the example we are overwriting white-color #ffffff to #f1f2f3.

Responsive Variables:

It is most important in the creation of responsive pages. You can define a variable for screen size and use the variable instead of define size again. Like in the example we define a variable ‘mobile’ and using mobile instead of screen size every time.

> How to create responsive variables-

> How to use created responsive variable-

Now you will able to create more flexible and good looking style sheet. Less Variables will make your work a little easier. You also want to check about CSS Counters.

Habilelabs provides web based and mobile based application development services with high quality.

Thanks for reading and if you have any questions about the blog etc, please let me know in the comments below.

Hope you found this helpful, so don’t forget to share it on Facebook.

Author: mukesh