Watch and Compile LESS From the Command Line

Unlike SASS and Stylus, the command line compiler that comes with LESS does not include a watch option to automatically compile LESS files whenever changes are made. There are several GUI apps that provide watch functionality but if GUIs aren’t your thing or if you need something that can run on a server, you’ll want a way to do this from the command line. Here’s an easy way.

Install watchr, which is a Ruby tool for monitoring directories and files. With watchr and LESS installed you can watch-compile directories and sub-directories with a single command:

watchr -e 'watch(".*\.less$") { |f| system("lessc #{f[0]} > #{f[0]}.css") }'

To make this a little more useful we can call it with a bash script. We’ll also print a status update on each compile. Successful compiles will print the compiled file name and any compile errors will be displayed in the console.

#!/bin/bash
# Requires watchr: https://github.com/mynyml/watchr
watchr -e 'watch(".*\.less$") { |f| system("lessc #{f[0]} > #{f[0]}.css && echo \"#{f[0]} > #{f[0]}.css\" ") }'

Name it something like watch_less.sh, put it in /usr/local/bin/ (or wherever you keep your executables), set permissions with chmod u+x watch_less.sh, and then just run watch_less.sh from your workspace.

Bonus

Here’s another option that uses inotify-tools (note: Linux-only) instead of watchr. This was suggested by @yoavweiss when I asked on Twitter if anyone had a recommended solution for watch-and-compiling LESS from the command line:

LESS watch&compile: while true;do N=`find -name “*.less” `;inotifywait -qe modify $N ;for f in $N;do lessc $f ${f%.*}.css;done;done

— Yoav Weiss (@yoavweiss) January 31, 2012