Web Design

How to use Variables in LESS CSS

LESS (dynamic stylesheet Language) allowed declare variable and use it when we need. We have to follow some rules to declare and use variable. I am gonna show you how to declare and use variable for LESS.

How to declare Variable :

Variable start with at-sign (@), so you have to write (@) as a first character of your variable name and use colon (:) to assign the value of that variable. Like:

/*Creating a variable. Variable name color*/
@color : #C00;

How to use variable :

 It is pretty easy to use those variable. just create a clsss/id. write a css properties (e.g color) and use @color variable as a value of that properties. like

  color: @color  /*Use Color variable*/

so the color of the text class will be (#C00). This is the simple use of variable. Actually when this code is compiled then then value of the color properties (#C00). I am showing you another example.


@text-color: #CCC;
@layout: 910px;

  width : @layout; 
  color: @text-color;

When this code will be compiled it become….

#header {
  width: 910px;
  color: #cccccc;

So you see how to declare and use variable. hope you guys are enjoy it.