How to Auto-Compile LESS into CSS
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 a regular CSS format that the browser can 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.
However, if for some reason, you are not 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.
LESS CSS – Beginner’s Guide
CSS Pre-processors have now become a staple in web development. They enhance plain CSS with programming features such... Read more
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.
Next, navigate to the Dead Simple LESS Watch Compiler. This is a compact Node script, developed by Jony Cheung, that tracks modifications in our LESS stylesheet and subsequently compiles them into CSS. Download the ZIP file, extract its contents, and position the less-watch-compiler.js in your working directory.
In this illustration, I’ve established two directories; /less, which is where I store my LESS stylesheets, and /css, the location where I prefer 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 find typing less-watch-compiler.js too time-consuming, consider renaming the file to something shorter, such as watch.js. This will allow you to execute the command more quickly.
node watch.js less css
Consider making some modifications to your LESS stylesheet and then save it. If the compilation process is successful, you should see a standard report as shown.
Final Thoughts
By installing this on your system, you eliminate the need for a separate app to compile LESS into CSS. This not only frees up additional space on your hard drive but also streamlines your workflow.