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:

Both comments and pings are currently closed.

Discussion

You blog post couldn’t have been more perfectly timed. I just started a new project and heard about watchr at the Twitter Bootstrap 2.0 announcement. I’m on OS X and decided to use growlnotify instead of echo and run watch_less.sh with & to not have a constantly running window.

> watch_less.sh &
runs

#!/bin/bash
# Requires watchr: https://github.com/mynyml/watchr
watchr -e ‘watch(“.*\.less$”) { |f| system(“lessc #{f[0]} > #{f[0]}.css && growlnotify \”compiled\” -m \”#{f[0]} > #{f[0]}.css\”") }’

(installed growlnotify with homebrew >brew install growlnotify)

@elgreg,

Very cool! I didn’t know it was that easy to integrate with growl. Thanks for sharing.

How could I add to the Ruby command that watchr accepts to make the file extension just ‘.css’ and not ‘.less.css’ ? I’m currently doing it with an Awk command in a helper script, but making it part of the watchr command would be much better.

The code I’m using now is here:
https://gist.github.com/2427957

Judah

@Tom, try this:

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

I modified the file to write style.less to style.css
works fine in Ubuntu.

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

It looks like twitter’s recess (https://github.com/twitter/recess) project are experimenting with something similar.

“Watch a single file for changes and auto compile a css file from the changes. experimental”

recess input.less:ouput.css –watch

TheWafflator

Hi folks – Thanks for the info, it’s exactly what I need. I’ve tried the bash script approach using @dodilei’s version and it works great… and then stops working after a few conversions. Sometimes it will only write one file, sometimes it’s 7 or 8 files.

I relaise that my sys skills are lacking but getting LESS to auto-compile is costing me a lot of time
:-|

Linux, Ubuntu 12.04
Running watch_less.sh on cmd line
No err messages, script dies gracefully on ctr+c

Any clues VERY much appreciated. Cheers.

Hi,

Thank’s for sharing. I tried something like you with watchr and less compiler earlier, but don’t find a way to make it working :-/ .
I also need support for multi-projects, so I wrote a simple python script that do the job on my ubuntu 12.04. It’s not the perfect script :)

the script : http://www.netcod.es/lesscss-on-linux/

Hi,
i did all you discribe (with .sh file). But i recieve this error:
“sh: 1: lessc: not found”

Do you know what a problem it might be?

Modified to take input and output directories and automatically create them if neccessary

src=$1
dest=$2

echo “$src ” $dest
while true; do
N=`find -path “$src/*.less” `
inotifywait -qe modify $N
for f in $N
do
if [[ $f =~ ^\./.* ]]
then
f=${f:2}
fi
if [ ! -d $dest/${f%/*} ]
then
mkdir -p $dest/${f%/*}
fi
lessc $f > $dest/${f%.*}.css
done
done

Thanks for this. It helped quite a bit
Since I am a fan of bash I made a small shell script

“watchr” is deprecated so I used “observr” (forked watchr)

I needed to have ONE input and ONE output file instead of compiling all files to separate .css files

Maybe someone can use it

(support line-comments or mediaquery for easier debugging)

Here’s the gist:
https://gist.github.com/pixelass/7964010

BTW: I will most probably update the script with more option to fully support lessc’s functionality

Made the script a git repo for better version control

https://github.com/pixelass/lessc-bash