Less Variable Interpolation

Less Variable is used to control the value in the Css rules. You can also use the variable value in other places also. You used in the selector name, Css property name, URL, @import statement.

How to use as a Selector Name

@class-name: header;

.@class-name{
Width:100%;
Float:left;
Height:60px;
}

Output:

.header{
Width:100%;
Float:left;
Height:60px;
}

How to use in a URL:
You can add the any file in the Css file like that images, fonts etc. You can create the variable and add the URL and you can use anywhere in the Css file. See the below example.

@bg-img: ‘../img/bg.png’;

body{
background-image:url(‘{@bg-img}’);
}

Output:

body{
background-image:url(‘../img/bg-img.png’);
}

You also declared like this

@bg-img: "../img";

body {
  color: #444;
  background: url("@{images}/icon.png");
}

Output:

body{
color:#444;
background:url(‘../img/icon.png’);
}

How to used in import statements:
How you can do this for URL same things you can do for the import statement.

@var-css-file: ‘../css/’;

@import: ‘@{vr-css-file}/less-var.less’;

How to used in the properties:
You can also use a variable value for Css property also.

@border-left: border-top-left-radius;

body{
@border-left:5px;
}

Output:

body{
border-top-left-radius:2px;
}

How can declare the variables with a variable name.

@border-rgh: 2px solid #dddddd;
@border-side: "border-rgh";  //what name given in the above
@boxview: @@border-side;

body{
border-right:@boxview;
}

Output:

body { 
 border-right: 2px solid #dddddd;
}

Share on Facebook Share on Twitter