The simple way to install LESS preprocessor through node.js and compile LESS file to CSS file

Lately I started my adventure with LESS. It is first post about the LESS for you. If you don’t know what is the LESS, I explain you that in several articles.

In nutshell, it is pre-procesor for CSS. It extends CSS for another features. LESS allows you use programming techniques to generate more flexible file for easy changes its content. You code a less file and than compile it to css file. You may compile a less file in several ways. I discuss it in following articles. In this post I present you how you may through the node.js install a less compiler and how generate CSS file form a LESS file through it.

First you go to the node.js website and download file. I download file on Windows 64-bit.

After that, start installation going through these following steps I presented below.

OK. You have installed node.js platform. Now you can use npm tool for installation of LESS comilator. So open Command Line and write:

npm install less -g

And click Enter.


Create folder e.g. myCSS and two files: HTML file and less file.

It is code of my LESS file:

@colorBox: darkgreen;
@background: lightgreen;
.myBox {
  color: @colorBox;
  background-color: @background;
  width:400px; 
  height:300px;
}

As you notice the less file has .less extension. It is not needed. You may add any extension for this file because it don’t need this extension. However I recommand .less extension for less files. Don’t worry about content of the LESS file.

And it is code of my HTML file:

In Command Line, go to the folder with HTML and LESS files. Then write code:
lessc main.less style.css
and click Enter. The first argument after lessc command is placed name of LESS file. Second argument is the css file. The HTML file contains the  link to the style.css file, therefore for this argument it was places the same name of the css file as in HTML file.

In the myCSS folder will be generated new file: style.css.

Look at the new style.css file.

The first version of HTML website without generated style.css:

And the next version of HTML website, but with generated style.css:

You have in the myCSS folder 3 files: HTML file, less file and generated css file which presents green div element in the website. It’s time to change content of the LESS file to this code:

@colorBox: darkgreen;
@background: yellow;
.myBox {
  color: @colorBox;
  background-color: @background;
  width:200px; 
  height:200px;
}

As you see, the font color and background color was changed, and also width and height. Save less file. Run again LESS compiler.

The style.css was changed. Look at its content.

After run HTML file you see website like that below.