Sass up your WordPress themes with Compass

I’m a Rubyist. But I’m also a pragmatic front-end developer. When I have to write a full-stack solution, I pick Rails or Sinatra because writing Ruby is a joy and the Ruby ecosystem is so darn cool. But when I have to create a CMS-based site for myself or a client I love the usability and community behind WordPress. Although I can reluctantly lay Ruby aside when I extend WordPress, I really miss my syntactically awesome stylesheets. Until now.

Introducing compass-wordpress

After turning my buddy (and Haml/Sass/Compass ninja) Adam onto Thematic, the awesome WordPress theme framework from Ian Stewart, we quickly started lamenting our loss of mixins, nested rules, variables, and bundled patterns we got from Sass and Compass. Fueled by a dream of writing WordPress themes without curly braces and armed with some info from Chris Eppstein, we hammered out a new gem – compass-wordpress.

Features

Compass-wordpress includes:

easy Compass and Sass integration for your WordPress theme
generic WordPress theme project template
Thematic child themes project template (more theme frameworks to come)
no production Ruby/Sass/Compass dependencies, deploy only your compiled CSS

Installation

Since compass-wordpress is a Ruby gem, you install it and its dependencies via ruby gems. If you haven’t yet switched to Gemcutter, you’ll need to do that first:

sudo gem install gemcutter
gem tumble

Then install compass-wordpress:

sudo gem install compass-wordpress

Password:
Successfully installed compass-wordpress-0.0.2
1 gem installed
Installing ri documentation for compass-wordpress-0.0.2...
Installing RDoc documentation for compass-wordpress-0.0.2...

Compass will also be installed if you don’t have it. If you’re new to Compass, head over to the wiki and checkout all the great info over there.

Usage

To stamp out a new blank WordPress template, drop into your themes folder in a terminal and run the compass command:

compass -r compass-wordpress -f wordpress  -p thematic my_awesome_theme

In this example we’re creating a new Thematic child theme. (You already have the Thematic theme unpacked to your themes folder right?) Let’s look at what we’ve got in our shiny new theme:

drwxr-xr-x  8 wynn  staff  272 Nov  5 22:15 .
drwxr-xr-x  3 wynn  staff  102 Nov  5 22:15 ..
-rw-r--r--@ 1 wynn  staff  364 Nov  5 22:15 config.rb
-rw-r--r--@ 1 wynn  staff  697 Nov  5 22:15 functions.php
-rw-r--r--  1 wynn  staff  312 Nov  5 22:15 readme.txt
drwxr-xr-x  5 wynn  staff  170 Nov  5 22:15 src
-rw-r--r--@ 1 wynn  staff  483 Nov  5 22:15 style.css
drwxr-xr-x  4 wynn  staff  136 Nov  5 22:15 stylesheets

If you want a different folder structure for your Sass and compiled css files, you can pass advanced options in the command line:

compass -r compass-wordpress -f wordpress  -p thematic  --sass-dir=sass --css-dir=css -s compressed my_awesome_theme

Developing your theme

The only change to your theme development workflow is using Sass instead of CSS. We compile that Sass into CSS using the compass command again.

compass --watch

This will launch a process to watch your source files and automatically re-compile your CSS referenced in your theme. As long as this process is running, you can just refresh your browser to view your changes. When you’re done, just CTRL-C to stop the compass process and deploy your theme as you normally would. It’s that simple!