How to automatically compile LESS into CSS on the server?

I have made a script and I publish the details:

• Easy to use for designers
• Executes LESS compiler immediately after file is saved, without consuming server resources
• Any editor capable of remote editing will work with this solution - Code, Sublime Text, Textmate

First, you need to install "npm" on the server by typing this into the console:

sudo apt-get install npm inotify-toolssudo npm install -g lesssudo nano /usr/local/bin/lesscwatch

Paste the following into the file:

#!/bin/bash# Detect changes in .less file and automatically compile into .css[ "$2" ] || { echo "Specify both .less and .css files"; exit 1; }inotifywait . -m -e close_write | while read x op f; do.    if [ "$f" == "$1" ]; then.        lessc $f > $2 && echo "`date`: COMPILED";.    fidone

Save, exit, then execute:

sudo chmod +x /usr/local/bin/lesscwatch

You are all done. Next time you need to work with your LESS files, you will need to open terminal (Coda has a built-in), go to the folder of your file (using cd) and execute this:

lesscwatch main.less main.css

It will output information about successful compilations or errors. Enjoy.

I have modified @romaninsh's solution so that it will recompile when any Less files in the directory are changed. I have also added an echo statement before compiling the Less files, to provide some validation that a change has been detected in case compilation takes a few seconds.

/usr/local/bin/lesscwatch:

#!/bin/bash                                                                     # Detect changes in .less file and automatically compile into .css                 [ "$2" ] || { echo "Specify both .less and .css files"; exit 1; }                  inotifywait . -m -e close_write | while read x op f; do                                if [[ "$f" == *".less" ]]; then                                                        echo "Change detected. Recompiling...";                                            lessc $1 > $2 && echo "`date`: COMPILED";                                                                                                                               fi                                                                             done 

This more closely mimics the behaviour of Less.app for Mac that I am used to.

When developing with Less, I usually have a bunch of files in the /style directory of my project and compile everything down into a single .css file using overrides.

Usage example:

base.less:

@import "overrides.less";@import "variables.less";body {   ...}

The usage is the same as

lesscwatch base.less base.css

i'd like the bash script but I had some trouble using it with sublime wthin ubuntu 12.10 . well, the scripts did the same Ian_Marcinkowski does, but I am sure it keeps working after first event, and monitor all files (sublime text someway, use a tmp file, and do not change the original one - !?!).

#!/bin/bash# Detect changes in .less file and automatically compile into .css[ "$2" ] || { echo "Specify both .less and .css files"; exit 1; }inotifywait -m -e close_write . | while read x op f; do    echo $f    echo "Change detected. Recompiling...";    lessc $2 > $3 && echo "`date`: COMPILED";done

call the script like :

./monitor.sh  </path/to/dir>  <main.less> <main.css>