Back to Top

Learn about Variables in LESS CSS

LESS CSS : Variables

In this second part of our LESS CSS series, we will look into Variables in LESS. If you don’t have basic idea or don’t know how to setup LESS,You can get idea about LESS from the first part here.

In first article,we have checked basics of LESS and how to use LESS.In this article, I am going to explain the LESS CSS Syntax and Variables.

LESS make css code organized because it work like a programming language rather than regular css. Same like any programming language LESS CSS support variables which you can declare once and use anywhere in the file.

Remember, You have to write your code into .less file so let’s understand how to use variables into LESS.

Variable Declaration SYNTAX

Variables in LESS begin with the @ sign follow by variable name

Let’s understand by code. Here, I am going to take two variable. You can paste it into your .less file

Next, we will use declared variables into the class or id or tag.

In Above, We have used variable and single statement of color so when you want to change its value, there is no need to find out and replace from everywhere from 1000 of lines you have written.

LESS compile the code with CSS when you render into browser so let’s see how compiled code looks:

Here I have used font color and background color, but in fact you can use for any element. Even you can use @import statements to reuse stylesheets so if you remove that stylesheet you can easily remove it.

String Variables in LESS

Next is about to store string value into the variables and use those variables for content property. Let’s understand by example:

Wrap Up:

That’s it. Download LESS js file and start implementation in your application.I am sure, you will love it to use and increase your productivity 🙂

In the next article of LESS Series, we’ll look in to Mixins, one of the good feature in LESS.

Hope this article series helpful to you.As always, thanks for reading an article. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Comments (3)

  1. […] would be the Introduction of LESS CSS which gives basic idea about LESS and you can also read the previous article, where we have discussed about the […]

  2. […] LESS. If you haven’t read the earlier three articles about LESS, check out An Introduction, LESS: Variables and LESS: […]

  3. […] now we have gone through four posts of LESS which are An Introduction, LESS: Variables ,LESS: Mixins and LESS: Nested […]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How to Get local time using EarthTool

Posted on 5 years ago


How to use Flickr API with PHP

Posted on 6 years ago