Thomas Sampson


Leave a comment

Working with LESS

What?

After having around 20 minutes exposure to LESS (CSS pre-processor) I’ve picked up the following quick tips:

How it works

LESS is a language/syntax for writing CSS which grants you more freedom and less repetition when defining and organising CSS styles with features such as variables, imports and loops. To be of any use, LESS files are translated into vanilla CSS for consumption in the browser (this can be done client-side at runtime, or baked out offline).

Writing LESS

Looks fairly simple, the LESS file I worked with (albeit for 5 minutes) bared a close resemblance to regular CSS, with some syntactic sugar sprinked here and there for good measure. Full specification can be found here:

Using LESS

Although it appears that someĀ nifty javascript can be used to translate your LESS code to CSS at runtime (probably preferable to reduce turnaround times during development), in my scenario I needed to bake out minified css files offline. This can be achieved as follows:

  1. Install Node.JS
  2. Open a Node.JS command shell
  3. Install the less nodejs package:
    npm install -g less
  4. Compile your LESS file, redirecting output to destination .css file:
    lessc styles.less -x > styles.css
  5. The -x flag can be removed if you do not require the CSS output to be minified