Less Commands

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Less Commands

To install Less on the server via NPM:

  1. npm install -g less   

To invoke the compiler from the command-line, after installing Less:

  1. lessc styles.less   

To compile the Less file and generate CSS:

  1. lessc styles.less styles.css   

To get minified CSS as output, you can use the clean-css plugin. After the installation of that plgin, a minified CSS output is specified with --clean-css option:

  1. lessc --clean-css styles.less styles.min.css   

 

To get CSS output on Console:

Syntax:

  1. var less = require('less');  

  2. less.render('.class { width: (1 + 1) }', function (e, output) {  

  3.   console.log(output.css);  

  4. });  

Output:

  1. .class {  

  2.   width: 2;  

  3. }  

Pass options to the compiler:

Syntax:

  1. var less = require('less');  
  2. Less.render('.class { width: (1 + 1) }',  
  3.     {  
  4.       paths: ['.', './lib'],  // Specify search paths for @import directives  
  5.       filename: 'style.Less', // Specify a filename, for better error messages  
  6.       compress: true          // Minify CSS output  
  7.     },  
  8.     function (e, output) {  
  9.        console.log(output.css);  
  10.     });   

Important Tips:

  • You must include your stylesheets before your script.

  • When you link more than one .Less stylesheet each of them is compiled independently. So variables, mixins or namespaces which are defined in a stylesheet are not accessible in any other.