Saturday, 20 July 2019

How to compile LESS using Node JS

You can use Node JS to compile LESS files into CSS files. The first thing to do is to install Node JS on your computer, For information, see:

https://blog.teamtreehouse.com/install-node-js-npm-windows

Once you have Node JS installed on your machine, test the installation:

npm -version

If this command is successful, you will see the installed version.



In your working folder, place a LESS file named simple.less. For example, you can use this LESS code:

@primarycolor: #FF7F50;  
@color:#800080;  
h2{  
color: @primarycolor;  
}  
h3{  
color: @color;  
}  

Next, create an HTML file named index.html:

<head>      
 <link rel="stylesheet" href="simple.css" type="text/css" />  
</head>  
<body>  
 <h2>A simple example of Less</h2>  
 <h3>Hello World</h3>  
</body>  
</html>  

 In this working folder, you have a simple.less and index.html. In the HTML file, notice the reference to simple.css. This file is produced by compiling the LESS file into a CSS file. To compile the LESS file into a CSS file, use this command:

lessc simple.less simple.css

In your working folder, you will now have simple.css.

 h2 {
  color: #FF7F50;
}
h3 {
  color: #800080;

}

Open the HTML in a browser, and you will see the rendered HTML with the CSS.

You have now learned how to compile a LESS file into a CSS file by using Node JS. 
I (Scott Macdonald) am a Senior .NET Developer Writer at Sitecore with 20 years in the high tech industry. I am also a programmer with knowledge in .NET, Java, JavaScript, C#,C++, HTML, XML and ActionScript. 

Linked In: http://www.linkedin.com/in/scottmacdonald2010
at