Tomoro Logo

Retrofit Sass and BrowserSync to a WordPress ‘dumb theme’

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.

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var sass        = require('gulp-sass');
var concat      = require('gulp-concat');
 
// browser-sync task for starting the server.
gulp.task('browser-sync', function() {
  //watch files
  var files = [
  './sass/*.scss',
  './*.php'
  ];

  //initialize browsersync
  browserSync.init(files, {
  //browsersync with a php server
  proxy: "http://localhost:8888/",
  notify: true
  });
});
 
// Sass task, will run when any SCSS files change & BrowserSync
// will auto-update browsers
gulp.task('sass', function () {
  return gulp.src([
      'sass/main.scss',
      'sass/wp-core.scss',
      'sass/*.scss'
    ])
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(concat('styles.css'))
    .pipe(gulp.dest('./css'))
    .pipe(reload({stream:true}));
});
 
// Default task to be run with `gulp`
gulp.task('default', ['sass', 'browser-sync'], function () {
  gulp.watch("sass/**/*.scss", ['sass']);
});

Firstly you’ll also need to run npm install gulp-concat –save-dev to add concatenation to your Gulp process.

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.