In Less we can use a variable following by an “@” symbol, for example if we have to use a font-family in our css and that family would be required again and again. We generally have font-family like shown below:

h1 {
 font-family: 'open sans', sans-serif;
}

Using a property once or twice is perfect and makes sense, but what about using that value again and again just imagine 99 times. It’s a huge pain I know but it’s very common. So, we can simply put our font-family in a variable like shown below and then that variable name will be used as many times as we want. Have a look below:

//variable
@sans: 'open sans', sans-serif;

First of all look at very first line in that code block which starts by double slashes, that means a comment in Less. Comments are to make your code readable and understandable in same time. Whenever you create a variable make a comment too, for better understanding of that variable and in future it makes life easy. Now when ever we need that font-family we can simply use like shown below:

h1 {
  font-family: @sans;
}
p {
  font-family: @sans;
}
a {
  font-family: @sans;
}

If you realize we are saving at least three (3) words each time to obtain the same font-family and also comma and quotes are used only once in the variable and now we are free from such headache.

One thing to note here is that, variables are not only to store font-family. You can store any value you want to store and so a lot of efforts can be saved. I generally prefer to use variables with very care, it means use proper variable names so any one can understand what that variable actually doing? So, have a look below for better understanding:

//variables 
//storing a color value
@white: @fff;
//storing a line-height
@line: 21px;
//storing a font-size
@size: 14px;

It’s just an example, you can choose any name and any value you want to store.

Advantages of using variables in Less
Let suppose you used above mentioned font-family in your project and after a while your boss says that “we are using Arial font now”. Then what? Are you reading every line of your css to make change? Definitely you will. Because we are doing same, but the advantage of using variable is that you can simply change your font-family in one place. Yes, you are right. So, changing the variables value will do the rest for us. So, have a look below:

//variable
@font: Arial;

And that’s it, imagine how easy to make a change in your entire document?

Using a variables name as value of another variable
We can also use a variable’s name as value of another variable, it looks confusing but it’s not. For example we store our first value in a variable and want that value in another variable. Have a look below:

//variable 1
@var1: "red";
@var2: "var1";

Simply we put name of the variable as a value of other variable like shown above and so var2 contains value “red” by now. Hence. When ever we want to use var2 we will do so:

.div {
  background: @@var2;
}

Yes, that’s how we use a variables value inside an other variable and that’s way of using a variable’s name as another variable’s value. We do use “@” symbol twice.