Organising WordPress Themes – Setting Up a Compass Project

SASS, WordPress

Instead of going over the benefits of using a css preprocessor or the advantages of using a framework like Compass, I’ll dive right in.

Installation

If you don’t have SASS or Compass installed already you can view the installation instructions here:

Alternatively, if you’re on a Mac open up Terminal and type:

followed by

This does require you have Ruby installed already which you should but you can check by typing ruby -v

Compass Project Setup

Once both are finished installing go to your theme/my-theme directory and create a sub-directory named assets or whatever you like. This is going to be where we keep all resources for our theme, including images, Javascript, and most importantly the SASS and CSS files.

Compass utilises a config.rb ruby file to define all your SASS settings. Using the Compass command line tool you can generate this file with a single line command, using various options to customise the config file to your project. In this case it would look something like:

compass create assets --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "images".

However, I find this kind of difficult to remember and often miss or mis-type one of the options. So instead I tend to create the file manually or more often than not copy it from an existing project. So in the assets directory create a new file named config.rb and in it paste:

If you’re planning on releasing your theme you should use the output_style = :expanded to play nicely with WordPress’ style guidelines. If not then whatever output style suits you best, the default is :nested.

Theme Info and the style.css File?

WordPress requires that you have a style.css file in the root of your theme folder containing at the very least the info for your theme. When working with SASS you have two options as far as I know. The first is that you keep an almost empty style.css containing just your theme info file in your theme directory and simply don’t enqueue it in your theme. Which to me feels kind of messy and if you’re releasing your theme may mystify someone who tries to edit it later.

The other option is to add this code to the bottom of your config.rb file.

This simply moves the compiled style.css file out of assets/css and into the root directory of your theme.

This will overwrite the existing style.css file so make sure to include the theme info at the top of your style.scss file. Also, for this reason you won’t be able to use the :compressed output style as this will remove all comments within the compiled css file including your theme info.

See also:

Other articles in this series

  1. Organising WordPress Themes – Partial Templates
  2. Organising WordPress Themes – Setting Up a Compass Project

Leave a Reply

Your email address will not be published. Required fields are marked *