Grunt: LESS to CSS

LESS stands for Leaner Style Sheets and is a backwards-compatible language extension for CSS.

Compiling LESS files to CSS can be achieved through the grunt-contrib-less plugin.

Navigate to the root directory of your project and run the command

				
				npm install grunt-contrib-less --save-dev
				
			

The package.json file's devDependencies field will now have a new listing called grunt-contrib-less

				
				  "devDependencies": {
				    "grunt": "~1.0.1",
				    "grunt-contrib-less": "^1.4.0"
				  }
				
			

Below is the set up of the Gruntfile.js file to compile the LESS file sample.less inside the src/less directory and output a CSS file sample.css into the dist/css directory

				
				module.exports = function(grunt) {
					grunt.initConfig({
						pkg: grunt.file.readJSON('package.json'),
						less: {
					      dev: {
					        options: {
					          compress: true
					        },
					        files: {
					          "dist/css/sample.css": "src/less/sample.less" // destination: source
					        }
					      }
					    }
					});
				  	grunt.loadNpmTasks('grunt-contrib-less');	
				}
				
			

For a complete list of available options, follow the link here. In the last statement, the plugin name grunt-contrib-less is passed as an argument to the grunt.loadNpmTasks() method and called.

Compilation of sample.less can now be achieved by running the command

				grunt less
			

For example, compiling the below LESS code

@headerColor: #16a085; 
h1, h2, h3, h4, h5, h6 {
    color: @headerColor;
}

yields the CSS

h1,h2,h3,h4,h5,h6 {color:#16a085}