How to Auto-Compile LESS Stylesheet

By . Filed in Web Design

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.

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 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.

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

Author:

Thoriq is a writer for hongkiat.com. He has been dabbling in Web Design for 7 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.com.

Advertisement