Dessy Chongarova

If you’re switching from writing plain CSS to using SASS (and Compass) and you’re doing WordPress theme development, there are a couple of pain points that you’ll come across.

1) You need a style.css file at the top level of your WordPress theme folder.
2) That file should start with a comment.

Let’s deal with the second point first, as it’s simply a matter of adding an exclamation mark to the opening comment of style.css like so:

If you don’t add the exclamation mark, the comment will be stripped off at compile and WordPress won’t recognise your theme.

Jumping back to the first problem, here is how the structure of a simplified WordPress theme folder looks like:

lovelytheme 
_images
_index.php
_style.css

And here is the file structure of an example Compass project:

lovelysite 
_SASS 
__style.scss 
_CSS 
__style.css 
_config.rb

So if you put your SASS folder (and config.rg file) in your WordPress theme folder, it will compile inside a CSS folder at the same level and there’s no straightforward way to tell it to do so one level up. Luckily, there’s Chris Coyer to point out that you can add ruby code to your config.rb file and use it to move the style.css file one level up at compile.

So just add this snippet at the end of your config.rb and you’re all set up!

You can see this in action by exploring the WordPress theme for this site on GitHub.