Setting up LESS on Windows

LESS is a beautiful thing, no truely it is. Preprocessing CSS is here to stay and it’s time to join the cool kids. I’ve worked with SASS and LESS and I have to say I haven’t noticed that much between the two, however I am currently looking at stylus which seems to be a pretty cool solution but we’ll leave that for another time.

LESS, like most things requires a bit of conifguration and I’ve noticed that a lot of the information is aimed at the MAC crowd with their terminals making life easy. For us windows folks (although I must confess I do also own a MAC) life isn’t quite so straightforward.

The basic LESS installation requires that you install node.js then use the node package manager to install as per the following:

> npm install less

You will then need to add the ‘node_modules\npm\bin’ folder to your PATH environment variables. If you’re unsure how to do this then take a look here

My variable now looks like the following :

C:\Users\oli\AppData\Roaming\npm;C:\Program Files (x86)\nodejs\node_modules\npm\bin;

You can then compile using the command line and lessc. Yay!

How I do it

Unfortunately, I don’t really like the command line and I prefer to use tools to do the same job (mainly as I end up closing command line by accident rather a lot).
When working with LESS I originally used Crunch to compile my less (see http://crunchapp.net/) but I went off of it as I wanted to continue using my own editor. After some googling and whatnot I discovered winless (see: http://winless.org/) which quickly became my favourite tool and performs much the same role as scout in SCSS. It has the advantage that you can point it at specific input files and when they change the files are recompiled to the output folder you wish to use.

Leave a Reply

    To the top
    css.php