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 knew 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, for some reasons, you might not be willing to install yet another app, and wondering if there is an alternative way. So today we are going to show you how to compile LESS to CSS without being dependant 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 sudo.

Then, go to Dead Simple LESS Watch Compiler. It’s a tiny Node script developed by Jony Cheung that allows us to monitor the changes in our LESS stylesheet, which 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 felt 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 in 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.

Final Thought

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 little more space on your hard drive and streamline your workflow.