Using LESS CSS pre processor with Geany

Fedora

We are going to run lessc via Node.js and iNotify. Everything is available to install through Fedora Yum. On Ubuntu use apt-get:

1. Install Node.js & npm (Node Package Manager) and inotify for file watching:

   $ sudo yum install nodejs npm inotify-tools

2. Install lessc (via npm):

   $ sudo npm install lessc -g

First I created directory 'scripts' in my home directory by running:

    $ mkdir scripts

Next I added that directory to path by editing .bash_profile in home directory

    $ geany .bash_profile

Add :$HOME/scripts at the end of PATH= line. This will require logout, login to take effect.

Create lesscwatch file:

    $ cd scripts
    $ geany lesscwatch

Add following:

#!/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 

Save file and make it executable by user:

    $ chmod u+x lesscwatch

Now by running command:

    $ lesscwatch filename.less filename.css

will start watching changes in less file and every time it (or any other less file in the same directory) is saved it will compile it to css file automatically.

When opening LESS file for edit Geany Terminal makes it easy to start compiling

To stop compiling use 'CTRL + C'

---

Contributed by: keijo***@gmail.com

Credits and reference: http://stackoverflow.com/questions/13671969/how-to-automatically-compile-less-into-css-on-the-server