How To: Add SASS to your Genesis Workflow

At Impossibly Creative, we use the Genesis Framework for all of our custom sites. The whys are a completely separate article, but suffice to say it more than does the job. One of the drawbacks to using Genesis, however, is it’s lack of built-in support for SASS (Syntacticly Awesome Style Sheets). With SASS being a modern web standard, it’s important to us that we use it, so we’ve come up with a way to integrate SASS into a Genesis workflow in just a few simple steps.

This tutorial assumes you know how to create a child theme as it is a standard practice when working with Genesis. For more on child themes, see this article from the WordPress Codex. Before we get started, set up a blank child theme, or use one of the StudioPress themes if you’re customizing it.

This tutorial also assumes you’ve set up a Gulp file before. For more on getting started with Gulp and Sass, check out this article.

Step 1: Prepare Your Folders

A typical SASS workflow uses a lot of files, so it’s important to keep them organized. I like to create a CSS folder and a SCSS folder (named for the file extension for SASS files). You’ll create both of these in the theme directory.

Step 2: Set up your Gulp file

For SASS to work, we’ll need Gulp to compile it. You’ll want to use the following. If you’ve named your SASS code folder something other than scss make sure you update the Gulp file to reflect that.

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('styles', function() {
    gulp.src('scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css/'));
});

//Watch task
gulp.task('default',function() {
    gulp.watch('scss/**/*.scss',['styles']);
});

The first Gulp task compiles any SASS code it finds in the scss directory and places it in the css folder. Whatever your main SASS file is named – let’s use main.scss – a CSS file will be created with the same name.

Step 3: Set up your style.css file

In order for your child theme to work, you’ll still need to have a style.css file. For this workflow, it will be blank except for the required theme information, but we still need it to exist. Go ahead and set up the required child theme info comments with your custom information.

If you’re using a pre-built StudioPress theme and want to keep the existing theme styles, make sure you copy them into a file called theme.css and put it inside your CSS folder. We’re doing this because WordPress will automatically load the style.css file at the end of the enqueue stack, and if you leave the StudioPress code in there, all of your customizations will get ignored due to the cascade.

Step 4: Set up your functions.php file

Now we come the point where we actually load the files into the theme. For this process, I like to use a function inside functions.php that loads all of my necessary styles and scripts. That’s where we’ll be putting the following code:

// Load the StudioPress theme styles (see Step 3)
wp_enqueue_style( 'studiopress-theme-styles', get_stylesheet_directory_uri() . '/css/theme.css' );

// Load the main CSS file
wp_enqueue_style( 'my-theme-styles', get_stylesheet_directory_uri() . '/css/main.css' );

The first line is only necessary if you’re customizing a pre-built StudioPress theme. It loads the file we created in Step 3. The second line will make sure the compiled stylesheet generated by your various SASS files gets enqueued and loaded properly by WordPress. Again, make sure you’ve updated the file name of the above CSS file if you didn’t name your primary SCSS file main.scss.

Step 5: Write some SCSS

That’s all you need to get up and running. Now it’s time to write some SCSS code! Don’t forget to call the gulp command to make sure your files get compiled down to actual CSS.

If you run into trouble with this workflow, feel free to contact me on Twitter. I’ll help out as much as I can.