Introducing Node.js

Node.js is a best application for use less format. Less is stands for dynamic style sheet language. We can write css code into less file with short hand technique and than node.js application converts less(with short codes) into perfect Css format. So we don't need to write proper and lengthy code with waisting precious time. Let see how can we use Node.js application and how to convert less into css format.

Compiling your first LESS file

The easiest way to compile LESS files is to install Node.js and use its package manager NPM to install RECESS. There are Node.js installers available for both OS X and Windows. In case you are running Linux, Visit Here for instructions on how to install Node.js via package managers.

Once you have Node.js up and running, you can run the npm command to install RECESS, which is a CSS hinter written by Jacob Thornton himself. It is the only compiler officially supported by Bootstrap, and it can compile LESS into CSS among other things. You can install RECESS by running the following command:

npm install -g recess

This will install RECESS globally on your system. Now that you have RECESS installed, its time to create your first LESS file. Create a new folder with named less in the project root and then create a file named styles.less in it. Add the following code to your newly created file:

@font-family: Arial;
@text-color: red;
body {
font-family: @font-family;
color: @text-color;
}

To compile the file, navigate to your project root and run the following command:

For example suppose you create your less folder on desktop and this folder containing styles.less file. For compiling or converting this file into css format first navigate this with node.js command prompt let see easy step.

cd desktop (command use for entering in desktop folders)
cd less (command use for entering in less folder)
recess styles.less --compile > styles.css (command use for covert less into css)

This will compile the code in your styles.less file and place the result in a file named styles.css. If you look into the file created by the compiler, you should see the following:
body {
font-family: Arial;
color: #ff0000;
}

We can also compress our css file while compiling, let see how:

recess styles.less --compress > styles.css

After compressing css file looks like as min version, let see compress css file

body {font-family:Arial;color:#f00}

Why Use Less

LESS is a dynamic style sheet language that is compiled into CSS. The compiler itself is written in JavaScript and is quite fast compared to its alternatives, SASS and Stylus.

LESS comes with a wide range of useful features that are not available in traditional CSS, such as variables, mixins, nested rules, functions, and operators. Let's face it. Writing CSS is tiresome and includes a lot of repetition. When you write your styles in LESS instead of traditional CSS, you can use the following features to improve your styles:

• Variables: Variables have always been missing from CSS. By using LESS, you can define your own variables to make your styles more dynamic and configurable.
• Mixins: Mixins are named methods that can be used over and over again to repeat an operation. They can also take arguments and support default values for these arguments. Mixins are a great way to get rid of browser-specific CSS prefixes.
• Nested rules: Instead of writing the same selector over and over again, you can use a parent selector and declare your rules for child elements within that rule to reduce the need for repetition.
• Functions: LESS includes a number of color functions, for example, darken and lighten functions that ease working with colors. You can also switch between different color schemes, such as HSL and RGB, with ease.
• Operators: With LESS, you can perform simple mathematical operations to calculate widths, margins, paddings, and so on. This comes really handy when you want to customize a grid in Bootstrap or write your own grid.