Less Example

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Less Example

Let's take a basic example to understand how Less work.

Create a HTML file named "simple.html", having the following data.

HTML file: simple.html

  1. <!DOCTYPE html>  
  2. <head>      
  3.  <link rel="stylesheet" href="simple.css" type="text/css" />  
  4. </head>  
  5. <body>  
  6.  <h2>A simple example of Less</h2>  
  7.  <h3>Hello JavaTpoint</h3>  
  8. </body>  
  9. </html>  

Now create a file named "simple.less". It is similar to CSS file. The only one difference is that it is saved with ".less" extension.

 

Less file: simple.less

  1. @primarycolor: #FF7F50;  

  2. @color:#800080;  

  3. h2{  

  4. color: @primarycolor;  

  5. }  

  6. h3{  

  7. color: @color;  

  8. }  

Put the both file "simple.html" and "simple.less" inside the root folder of Node.js

Now, execute the following code: lessc simple.less simple.css

Less Less example1

This will compile the "simple.less" file. A CSS file named "simple.css" will be generated.

For example:

Less Less example2

The generated CSS "simple.css", has the following code:

  1. h2 {  

  2.   color: #FF7F50;  

  3. }  

  4. h3 {  

  5.   color: #800080;  

  6. }  

Output:

Less Less example3