Starting a SASS workflow with Alfred

When you’re working with SASS (or Compass, or Bourbon, etc), and you want a simple way to compile your code, you might try a solution like CodeKit or Hammer.

If you don’t mind a bit of command line, you know that you can do a lot of the same thing with a simple command, something like:

sass — watch sass/style.scss:style.css

or

compass watch

While these commands are easy (enough) to remember, sometimes I like to be especially lazy. With a simple, one-time setup, we can make Alfred do some of our dirty work (and take this chance to multitask a bit).

In addition to starting our watch command, we’ll use Alfred to open our project folder, giving us quick access to our source files.

To accomplish this amazing feat of mediocre laziness, we’re going to make a custom Alfred workflow. If you aren’t aware (aka aren’t an Alfred power user), a workflow is a custom series of actions kicked of with a simple, one-word command. Here’s what we’re after:

What you’re looking at: a keyword, “little”, which starts two actions: our ‘watch’ command in terminal, and opens the location of our local build folder.

Once you create a new, blank workflow, you’ve gotta add a couple blocks. First, an input that accepts keyword, in this case “little” (bonus points for adding a custom logo/icon).

Sprouting from that input, I’ve made two actions, one that runs a terminal command and one that opens the folder. Here is what my terminal command looks like:

This command does two things, one after the other. It changes to the correct directory, then starts watching for Compass changes.

cd ~/dropbox/little/build && compass watch

You could tack on some more commands, if you’re feeling feisty, but that wouldn’t be very lazy of you.

With our two actions hooked up, firing up Alfred and typing in “little” will make it all spring into action, like so:

My folder, my terminal, and my editor, ready. to. roll.

I know this might seem like a lot of steps, but settings this up takes like 30 seconds, then running the command each time after that takes like 2. Try it.

I like using Alfred to fire my SASS watch commands because it avoids the extra setup that comes with things like CodeKit, Hammer, and the like (plus avoids the fact that not everyone else uses a fancy app like that).