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:


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


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.