Sass-ifying WordPress

One of biggest benefits SASS is the ability to split your styles up into multiple files and compile them into a single stylesheet. It makes writing code super efficient and extremely organized, meaning maintenance is a breeze.

But how does that work for WordPress? If you’ve ever developed a WordPress theme before, then you know that style.css is a required file to make your theme run properly. At the same time, writing SASS requires you to develop locally, meaning no more live development. Thank God for that, but you can start to see how there’s a conflict between writing for SASS and developing for WordPress.

So how do we get our nicely SASS-ified styles to compile neatly into WordPress? I see three possibilities:

Call your compiled SASS file separately in the site head

Sure, you just compile your SASS into its own file. Then you’ll have to include the file in the site header along with the empty style.css file:

I would never do this in a production site because it adds a very unnecessary extra call to the server, but it is certainly valid and will work while allowing you to keep all your styles in a single, maintainable spot. Just make sure you call the compiled file second, especially if you have styles in style.css. Otherwise, the styles in styles.css will override your SASS styles.

Create a Style Directory and Compile as Style.css

This is probably the least invasive method and ideal for smaller projects. However, I find it a little stifling to be limited to calling my file what WordPress wants it to be.

To make this work, create a directory in your root folder that holds all your styles. That might look something like this:

style.css
styles
├── components
│   ├── comments.scss
│   └── module.scss
├── global
│   ├── grid.scss
│   └── variables.scss
├── mixins
│   ├── emcalc.scss
│   └── font-size.scss
├── sections
│   ├── about.scss
│   └── bios.scss
├── vendor
│   ├── normalize.scss
│   └── reset.scss
└── style.scss

From there, it’s cake. Make sure your style.scss file is set to compile to style.css in the root folder and you should be good to go. I’m sure there’s a super simple way to do this in the command line but, if you’re like me and like to avoid commands at all costs, then a compiler like CodeKit lets you toggle these settings very easily.

Import your Compiled SASS file into Style.css

This is my favorite method and the one I use on this site, as of the writing of this post. It’s very much like the last method while giving more flexibility to the naming conventions. Yes, it’s another call to the server, but I think the hit is minimal for small sites like mine. Method #2 is probably the winner for larger projects where every millisecond counts.

So, your file structure will output your SASS file in the Styles directory and will be imported by styles.css in the root directory like this:

/*   
Theme Name: Geoff Graham
Description: The fourth generation of my personal WordPress theme.
Author: Geoff Graham (@geoffreygraham)
Author URI: https://geoffgraham.wpengine.com
Version: 4.0
*/

/*-------------------
Import SASS Styles
-------------------*/

@import 'styles/global.css';

What I like about this method is that it still allows you to use styles.css in the event you really want to override anything in your compiled SASS file by adding those styles after the import. Not that you really want to manage your code that way, but it’s nice for quick hacks that you can go back and clean up with more given time without polluting your clean SASS files. Sort of like a Shame file.

A Note on the Configuration File

I ran into a lot of headache the first time I tried to set up a SASS project for a WordPress theme because the project wouldn’t recognize my file paths even though they were correctly set up in CodeKit. It turns out this is a relatively simple step that requires updating the config.rb file for your project. I didn’t know that at the time, so I hope it saves you a few minutes and gray hairs.

In short, all SASS projects contain a config.rb file that is kept in the root directory. Don’t have one in there? Just create one and drop in there.

Here’s how my file is set up:

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "styles"
sass_dir = "styles/scss"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

output_style = :compressed
environment = :development

I got this from the Zurb Foundation framework and simply repurposed it for my own needs. You can see how I had to specify the exact directories for my CSS, SASS, Images and Javascripts in order for the project to understand where things go when they’re compiled.

There are many more options to configure here, but that’s far more than my blonde head can comprehend. This should get your started.