How to Auto-Compile LESS Stylesheet
We have discussed LESS CSS a few times in our previous posts. If you have been following our LESS post series, you should know that we have to compile LESS into regular CSS format that the browser could understand. There are plenty of free tools with a nice GUI to do the job such as SimpLESS, WinLESS, LESS.app, and ChrunchApp. These are all free apps.
Image courtesy: lesscss.org
However, if for some reason you are not be willing to install yet another app, and are wondering if there is an alternative way, we have a handy workaround for you, without being dependent on additional apps.
The compiling process will happen instantly on save, so yes, it is technically similar to how we compile Sass with the
watch command. Let’s take a look.
Recommended Reading: LESS CSS – Beginner’s Guide
First, let’s open up the Terminal (Mac and Linux); if you are running on Windows you can open Command Prompt. Then, install LESS CSS via NPM (Node Packaged Modules) with the following command line.
npm install less --global
The command line will grab the LESS package and its dependencies. Note that if you are on Windows, you probably don’t need to run this command with
Then, go to Dead Simple LESS Watch Compiler. It’s a tiny Node script developed by Jony Cheung that monitors the changes in our LESS stylesheet, then compiles them into CSS. Download the ZIP, extract it and place the less-watch-compiler.js in your working directory.
In this example, I’ve ceated two folders; /less is where I put my LESS stylesheets, and /css where I want the CSS output to be saved.
In Terminal, navigate to your working directory path and run the following command:
node less-watch-compiler.js less css
If you feel that having to type “less-watch-compiler.js” takes too long, you could rename the file to something like watch.js so you can run the command this way.
node watch.js less css
Make some changes in your LESS stylesheet and save it. If the compiling process succeeds, you will see a typical report like so.
By having this installed on your system, you don’t need to install an app for compiling LESS to CSS, which in turn could free up a bit more space on your hard drive and streamline your workflow.