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.
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.
- 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
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
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.
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.
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!
If you're into WordPress development (especially if you're partial to another theme framework), why not fork us and join the party?