How to Setup CodeKit using Sass and Compass for WordPress

I’m a recent convert to writing my CSS using Sass and Compass through CodeKit. It took me a little while to figure out how to get started with CodeKit and building WordPress themes specifically, so I thought I’d share how I got it all configured. Setting up CodeKit for use with static files is very simple, but since we’re building with WordPress there are a few things to look out for.

After you’ve gone through the process of installing WordPress locally and copying over your base theme into WordPress, go into CodeKit and select the “+” sign on the bottom left. Select New Compass Project.

A screen will then appear asking for where you would like your asset locations to be. For my WordPress themes, I like to have the style.css in its default location, right in the theme folder root. When it asks you where you want the output style.css file to be in your folder structure in CodeKit, just enter a “.” for now since we don’t want the style.css file in a subfolder.

 

Click on “Create Compass Project”, browse to your theme’s folder, and select it. Next, open your newly created config.rb file which houses the Compass configuration. Change the css_dir field to css_dir = "/" to set the output of the style.css to the root of your theme folder.

 

Now open your style.css file and in the first comment block which lets WordPress know that this folder structure is a theme, add a “!” to the first line like so:

 

This tells CodeKit to keep the comment block intact even when compiling your SCSS files. If you have anything else in your style.css file at this point, you can delete the rest of it since your SCSS files will compile to this file. Copy the style.css file into your Sass folder (or whatever you named the directory) and name the file style.scss. This file sets your imports like so and has the core comment block included:

 

After you set your imports (a good guide to Sass imports can be found here), do a manual refresh on CodeKit if it hasn’t found the new style.scss file. It should now see the new styles.scss file and it should say that’s it’s compiling to your style.css file in the root of your theme folder.

Next up, create a _normalize.scss file or _reset.scss file (if you like to reset your CSS), create a _global.scss (or whatever you like to name your main import file) in your code editor, import Compass at the top of the _global.scss file via @import "compass/css3";, and write your Sass like normal within the _global.scss file and your other .scss files. You’re all set!

Hopefully this guide helps you with your next project.

Here are some additional Sass resources and guides: