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.