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
    • 540
    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.

     

    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.

    @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
                           OR                           
                           OR                           
Register

Sign up using

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