Automatisch SASS compilen

SASS heeft veel weg van LESS wat vooral door Twitter gebruikt wordt maar het schijnt iets beter te zijn.  Het is een manier van CSS code schrijven waarbij de CSS syntax gevolgd wordt maar waarmee je ineens toegang krijgt tot variabelen, functies en meer. Het enige nadeel is dat je SASS (.scss) bestanden wel nog moet omzetten naar CSS.  Daar is een handig programmaatje voor maar die moet je dan nog steeds elke keer dat je een aanpassing doet handmatig uitvoeren. Om dat op te lossen heb ik een klein Bash script gemaakt.

Dit script maakt gebruik van inotify en sassc en is getest onder Ubuntu 14.04. Om inotify te installeren voer je het volgende uit:

sudo apt-get install inotify-tools

sassc installeren is iets moeilijker want die moet je zelf compilen. Voor zover ik me herinner heb ik daar deze tutorial voor gevolgd.

Dit is het script wat ik gemaakt hebt. Deze kun je in principe overal neerzetten. Sla dit script op als scss2css.sh en voer een "chmod +x scss2css.sh" uit. Pas de dir= regel aan naar de map waar je sass/css code in staat.

#!/bin/bash
dir='/var/www/http_docs/'
sassc='/usr/local/bin/sassc'

inotifywait -m -r -e modify,close_write,create,moved_to,move --format %w%f $dir | while read scss_filepath; do 
    filename=$(basename "$scss_filepath")
    extension="${filename##*.}"

    if [[ "$extension" == "scss" ]]; then
        if  [[ ! $filename =~ ^_ ]]; then
            css_filepath=${scss_filepath/.scss/.css}
            $("$sassc" "$scss_filepath" "$css_filepath")
        else
            filename=${filename:1}
            filename=${filename/.scss/}
            files=$(grep -clRE --include=*.scss "import.*$filename" "$dir")

            for scss_filepath in $files; do
                css_filepath=${scss_filepath/.scss/.css}
                $("$sassc" "$scss_filepath" "$css_filepath")
            done

        fi
    fi
done

exit 0

Als laatste is het natuurlijk handig als het script tijdens het booten gestart word. Dit kan door een aanpassing in /etc/rc.local. Voeg daar deze regel aan toe:

su www-data --shell=/bin/bash -c '/var/www/scss2css.sh  > /dev/null 2>&1 &'

Leave a Reply

Your email address will not be published. Required fields are marked *