In our previous blog, we learned how to declare a variable in LESS and how to use variables as to control values in CSS rules, but they can also be replaced with the selector names, property names, URLs and @import statements.

1. Selectors:

The selectors can be used as a reference to any variable and are built during the compile time.

index.html

<h2>LESS Variable Interpolation</h2>

<div class="div1">

  <p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>

</div>

<div class="div2">

  <p>LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross browser friendly.</p>

</div>

style.less

@selector: h2;

@{selector} {

  background: #2ECCFA;

}

Next, compile your style.less file to style.css file. After executing, your style.css file will contain the following code :

style.css

h2 {

  background: #2ECCFA;

}

Output:

2. URLs

LESS variables can also be used to hold the URLs as the value.

3. Import Statements

here variables are used to hold a path as a value. It is useful incase when we are referring to a common parent directory.

4. Properties

here variables are referenced by properties.

Compiles to:

Happy Coding :)