SASS Watcher

You might have seen me tweet, write or talk about them before. I am a big fan of CSS pre-processors. Starting out with Shaun Inman’s CSS Cacheer, eventually doing a lot of work with Anthony Short’s CSS Scaffold and now I’ve finally landed on using SASS — specifically, it’s SCSS syntax.

Now there’s a small bump in the road for web designers wanting to use SASS. This bump is called the Command Line Interface, or Terminal.app. Would you have finally gone over this bump, it’s still pretty verbose to go into the Terminal every time you are working on a file, to let SASS look at the file you’re working on. It might as well be my laziness, though. So to fix this problem, I wrote a little OS X service (that sounds way more interesting than it actually is).

Don’t be scared

First off, regarding that speed bump of installing SASS. If you’re on a Mac, it is actually more a matter of getting yourself to open the Terminal, than of actually being able to brick your machine. So if you’re interested in SASS, don’t be scared, go into the terminal and enter:

gem install sass

That pesky watch command

Now here is where I become a lazy bastard. Every time you want a SASS file to automatically generate a CSS file, you need to run a command that tells SASS which file to watch.

sass --watch "filename"

This is a simple command, but it’s still needs you to open up the Terminal every time. Oh no?!

Enter SASS Watcher

Now, let me emphasize again that this is not brain surgery, nor rocket science. It’s a tiny little Automator service that runs an even tinier bit of AppleScript and works a bit like this:

Open up Terminal.app

Run the watch command of the filename selected

Hide all Terminal windows

Installing SASS Watcher

It’s really easy to install SASS Watcher. Simply download it and place it in the following folder: ~/Library/Services/ (where ~ is your home folder, of course)

How does it work?

It being an OS X service, means that you can find it in the contextual menu of a text file in the Finder: