The latest version of Lemonade-2015 uses Sass Maps, which are currently unsupported by WP-SCSS.

You will need to compile SCSS via another method if you import Lemonade SCSS files that utilise these advanced functions (currently only “_colors.scss”).

This tutorial covers using Gulp to compile Sass.

1. Install Node.js
2. Install Gulp Globablly by entering sudo npm install --global gulp into the command line (terminal)
3. Whilst in the command line, change directory (cd) into your theme folder and enter npm install --save-dev gulp
   1. This installs gulp to your project
4. Now enter npm install --save-dev gulp-sass
   1. This installs the ability to compile Sass
5. In order to run Gulp, your project will require a “gulpfile.js” (see below for a working example)
6. Finally, go back tto the command line and enter gulp
   1. Now when you save scss it will be compiled, so make sure you don’t have any other compilation software running (like WP-SCCS)

If you’re using a fork of Salt (a Lemonade Child Theme) then a Bash Script is included to make this task much easier. To use this, change directory (in Terminal) to the theme directory and then run:

sh setup.sh

Now sit back and watch the magic happen.

Example gulpfile.js

A basic gulpfile is included with Salt.

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles', function() {
 gulp.src('style/scss/**/*.scss')
 .pipe(sass().on('error', sass.logError))
 .pipe(gulp.dest('./style/css/'));
});
//Watch task
gulp.task('default',function() {
 gulp.watch('style/scss/**/*.scss',['styles']);
});