Using Sass in a WordPress Theme

I’ve been having more fun that a puppy with a chew toy.  I needed to create a new WordPress theme which I haven’t done in a few years so I did my normal wander around the internet to find out what the current technology is like.

My explorations ended up at the Underscores  which is a impressive starter theme that I immediately fell in love with. Equally impressive was Morten Rand-Hendriksens “WordPress: Building Themes from Scratch  with Underscores” online course, which I devoured over the course of a few days.

You create a Underscores starter kit by going to their website and entering a theme name and clicking “Generate.”  However, it get’s much more interesting when you click “Advanced Options” and find out that you can enter most of your themes meta-data and  one mysterious checkbox: “

It turns out that checkbox does a bit of magic.  It adds a “Sass” directory tree with a sassified version of style.css which gives you a more organized method of dealing the your theme styles.  For a peek at the magic of Sass you’ll want to visit over the their website.

Sass takes “style.scss” and turns it into “style.css,” the only problem is it’s rather recalcitrant in putting the css file in the same directory or in the “../css” directory which WordPress really doesn’t care for.  Or does it?

Style.css is used for two different purposes: a) To obtain the theme meta-data and b) To provide the css styles for the theme.  It turns out the it’s relatively easy to split theme across two files.  Here’s how:

In functions.php we want to change the style sheet enqueue (remember that we started out from Underscores?):

From: wp_enqueue_style('xxx-style', get_stylesheet_uri() );
To: wp_enqueue_style('xxx-style', get_stylesheet_directory_uri()."/sass/style.css" ):

To avoid confusing myself, I remove the theme metadata from sass/style.css which has the added benefit of a bit less code in the style sheet.

I then remove all the styles from the top level “style.css” and put a note in to “Look for them in the sass directory tree.” I’m going to eat my cake now and admire it afterwards.