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