I am back with a new post titled “Getting Started with LESS”. We have often used CSS for designing layout of our web pages but there is a new buzzword in the web designing industry which is LESS. Less is a dynamic stylesheet language which offers various advantages over CSS like ability to use variables, nesting, mixins(functions), operators etc. The main difference between Less and other CSS precompilers is that Less allows real-time compilation via less.js by the browser.

LESS extends CSS with dynamic behavior such as variables, mixins, operations. LESS runs on both the client-side and server-side, with Node.js.

There are many third-party tools to convert the LESS file into CSS but in this post I will demonstrate the use of a Less Compiler which runs inside Node. First we need to install Node Package Manager.

To install Node.Js you can use the commands below:-

Once it is installed, you can install the lessc(compiler) using node package manager like this:-

To compile the less file you can simple use this command:-

The above command will display the generated CSS content on the terminal.


The following less file:-

compiles to

You can also save the content in a css file like this:-

There is one more way using which we can compile less files on the fly.(Using less.js)
We can link less.js file and our .less file in our html page and the less.js will compile the less file and generate the CSS. Here it the screenshot:

It was just an introduction to Less. I will explain more about Less in my next blog post 🙂