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

This blog is part of 1 Tute Sets.

LESS Tutorial
  • How to write LESS CSS?

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 451
    Comment on it

    In our previous blog we talked about how to install the LESS into our system. Now in this blog we will learn how to write LESS CSS. So, are you ready? Let's start then.

     

    As we have many different compilers available for LESS, each of them are programmed in different languages like there's a Ruby Gem, PHP version, .NET version, and one written in JavaScript. Here I'll be using JavaScript complier as it is most simplest and easiest to get started with. We just have to include the script in our HTML code, and then it will process LESS live as the page loads.

     

     

    Include the following links into the <head> tag of your mark-up:

    <link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
    
    <script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

     

    Now we can begin with writing LESS code in our .less file

     

    Nesting Rules

    In regular CSS, we used to write each rule set separately, which leads to long selectors that repeat the same stuff again and again like:

    .container { } 

    .container h1 { } 

    .container p { } 

    .container .myclass h1 { } 

    .container .myclass p { }

     

    With LESS we can nest rule sets inside another rule sets. We will rewrite the above example with nesting:

    .container {

              h1 { }

              p { }      

              .myclass {

                      h1 { }         

                      p { }      

              } 

    }

     

    Also, in case if you want to add pseudo-classes to this nesting structure, you can do so with the help of “&” symbol like:

    .menu li a{

            & : hover {} 

            & : active {} 

            & : visited {} 

    }

     

    Sample program to demonstrate the use of nesting rules in LESS file.

     

    index.html

    <div class="container">
    
       <h1>First Heading</h1>
    
       <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
    
       <div class="myclass">
    
            <h1>Second Heading</h1>
    
            <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
    
       </div>
    
    </div>

     

    style.less

      h1{
           font-size: 25px;
    
           color:#E45456;
     }
    
      p{
           font-size: 25px;
    
           color:#3C7949;
      }
    
     .myclass{
    
         h1{
            font-size: 25px;
    
            color:#E45456;
         }
    
        p{
           font-size: 25px;
    
           color:#3C7949;
         }
       }
    }

     

    Compile your style.less file to style.css with the help of command:

    lessc style.less style.css

     

    After executing the above command it will generate style.css file with the below code:

    .container h1 {
      font-size: 25px;
      color: #E45456;
    }
    .container p {
      font-size: 25px;
      color: #3C7949;
    }
    .container .myclass h1 {
      font-size: 25px;
      color: #E45456;
    }
    .container .myclass p {
      font-size: 25px;
      color: #3C7949;
    }
    

     

    Output:


 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: