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:-

sudo apt-get update
sudo apt-get install -y python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

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

sudo npm install less -g

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

lessc fileName.less

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

Example:-

The following less file:-

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { 
    font-size: 12px;
    a { 
      text-decoration: none;
color:#1468ef;
      &:hover { 
       
       border: 2px solid;
      }
    }
  }
}

compiles to

css code

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

lessc style.less > style.css 

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:

less cdn

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