Retrofit Sass and BrowserSync to a WordPress ‘dumb theme’

14 December 2016 #Code

Once you go Sass, you can’t go back. So what do you do with all your old projects after you’ve seen the light?

This tutorial is a step in the right direction, showing how to simply add the power of npm, Gulp and Browser Sync along with Sass to the starter theme Underscores. I’ve used Blankslate for many years and the tutorial works the same.

The only issue I took with that tutorial (follow it first, then read on below) is that it makes one css file for each of your Sass files. This isn’t entirely useful.

I’ve made some modifications to my gulpfile. With explanations below.

Get my Gulpfile Here

  1. Run npm init
  2. Run npm install gulp gulp-sass gulp-concat browser-sync --save-dev

The modifications I’ve made allow you to create multiple Sass files (in my example main.scss and wp-core.scss) so that you can separate your styles into bite-sized pieces and have them still generate and minify into one css file.

There’s also a wildcard rule there to catch any other Sass files in the same directory, but you can stipulate them individually to control the order.