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:

  1. Open up Terminal.app
  2. Run the watch command of the filename selected
  3. 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:

  1. Right-click (or Control-click) a SASS file
  2. Hover “Services” and there is the “SASS Watch”
  3. Click it

That’s it. Simply right click the file, and click the contextual menu item. Boom! You’re generating CSS files. (If “SASS Watch” doesn’t pop up in the contextual menu, try restarting the Finder; right click the finder icon whilst holding Option / Alt.)

Caveats

There are some very small things that I find slightly annoying, yet do not carry enough weight for me to look into them.

  1. There’s no real user feedback, apart from a window that shows and instantly hides.
  2. It will hide all Terminal windows. I have no idea how to get them back into view, but I use “iTerm” for my normal command line duties, so it’s not really a problem for me.
  3. It’s works on all text files in the Finder. I’d love for it to just work for files with a .sass extension.

If you want to help out, or go totally crazy with it, the source is on GitHub.