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.

grunt less to css

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}