Handy SASS watch functions

Yesterday I started working on a new project and needed an easy way to watch my sass files, I didn't want to have to write out the full watch command every time. So I came up with these magical functions that not many have seen and lived to talk about.

sass-watch-dev watches a file, while printing debug data and line numbers, making it easy to work with FireSass for Firebug/Firefox and the new experimental support for Sass in Chrome.

sass-watch-live watches a file and simply compresses the output, making it ready to go live.

function sass-watch-dev {
    if [ $# -eq 0 ]
    then
        echo "You must provide an argument for the file name. E.g. main (.scss and .css automatically appended)"
    else
        sass -l -g -t expanded --watch $1.scss:$1.css
    fi
}
function sass-watch-live {
    if [ $# -eq 0 ]
    then
        echo "You must provide an argument for the file name. E.g. main (.scss and .css automatically appended)"
    else
        sass -t compressed --watch $1.scss:$1.css
    fi
}

Place these functions in your .bash_profile or .bashrc file located in your home directory (run: cd ~).

Both of these functions expect one parameter and will complain if you forget to pass it. The parameter they expect is simply the file name without the file extension. For example:

sass-watch-dev main

This will tell sass to watch main.scss and output main.css.

Of course you can tweak these functions to suit your working habits.