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

This blog is part of 1 Tute Sets.

LESS Tutorial
  • What is variable in LESS CSS ?

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 207
    Comment on it

    Lets take a basic example of giving color values across an entire website. We will generally apply a palette of colors and any given color could be used countless number times also on multiple elements which leads to the repetition of code throughout the CSS. And in case if we want to change the color we would have to do a “Find and Replace”.

     

    LESS help us to avoid the repetition of same value multiple times by the use of variables.

     

    Variables in LESS are defined with an “@” symbol and values are assigned with a colon (:) like,

    @head-color : #FFFFFF;

    where, head-color is the variable name and #FFFFFF is the value assigned to it.

    With the use of variables, it is easy to maintain the code and the values can be controlled from single location.

     

    Sample program to demonstrate the use of variables in LESS

     

    index.html

    <h1>LESS Variables</h1>
    
    <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

    @base-color: #ED7B3A;
    
    .div1{
    
      background-color : @base-color;
    
    }
    
    .div2{
    
      background-color : @base-color;
    
    }
    

     

    Next, compile your style.less file into style.css :

    lessc style.less style.css

     

    after executing, your style.css file will contain the below code:

    style.css

    h1 {
    
      color: #D0DC11;
    
    }
    
    .div1 {
    
      background-color: #ED7B3A;
      color: #D0DC11;
    
    }
    
    .div2 {
    
      background-color: #ED7B3A;
      color: #D0DC11;
    
    }

     

    Output:

    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: