SASS + Compass + WordPress

I’ve been spoiled working with SASS and Compass in the context of Ruby apps for long enough now that I forgot what life was like without them. Switching over to WordPress and PHP for a recent project painfully reminded me, but the hurt didn’t last long. Here’s what I did to soothe it, starting from the top.

Oh: if you haven’t used SASS and you plan on ever writing a single line of CSS, ever, it’s something I can’t imagine living without. I truly believe it doubles my productivity. SASS (or LESS if you want to go that route: I think they’re both great) is indisputably the business. To get started you need passing familiarity with the command line, but if you scurred this article demystifies it.

There’s A Gem For That, Sort Of

I Googled and immediately found the super-promising compass-wordpress gem. OH HELL YEAH until I found out that it doesn’t play well with recent versions of Compass (though there’s an open pull request that deals with this issue). After learning more than I ever wanted to about pessimistic constraints I figured I could just get SASS and Compass working by hand.

Installing SASS & Compass

You need Ruby to install SASS and Compass (if you’re on OSX, this is just going to work because it’s already there, and if you’re using RVM, even better). When you install Compass, you’ll get SASS too:

gem install compass

Get Your WordPress Theme Ready

I’m familiar with Thematic and usually start with a fresh child theme‘s fairly empty directory where I create a new Compass project:

compass create

Make sure that you reference the compiled CSS (at the very least you’ll probably want /stylesheets/screen.css if you stick with the defaults) in your new theme’s templates as you’re building them out.

Make Epic Blog

Open a command prompt from your theme’s directory and let Compass start automatically compiling:

compass watch

You’re off and running with SASS and Compass all up in your WordPress.

BTW: there are a couple of other WordPress tricks that I’ve started using along with SASS and Compass to make development more efficient and more joyful. Those include using Coffeescript, customizing the directory structure of the project and automating some repetitive commands with Consular, which I’ll explore in a future post.