Join the social network of Tech Nerds, increase skill rank, get work, manage projects...

This blog is part of 1 Tute Sets.

LESS Tutorial
  • LESS -Variable Interpolation

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 519
    Comment on it

    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.



    <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 class="div2">
      <p>LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross browser friendly.</p>



    @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 :


    h2 {
      background: #2ECCFA;




    2. URLs

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

    @images: "../img"; // variable

    body {

        color: #000;

        background: url("@{images}/white-sand.png"); // usage




    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.


    @themes: "../../src/themes"; //variable


    @import "@{themes}/tidal-wave.less"; //usage


    4. Properties


    here variables are referenced by properties.

    @prop: color;

    .widget {

          @{prop}: #E64732;

          background-@{prop}: #E64631;



    Compiles to:


    .widget {

         color: #E64732;

         background-color: #E64631;



    Happy Coding :)

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: