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.
- Install Node.js
- Install Gulp Globablly by entering
sudo npm install --global gulp
into the command line (terminal) - Whilst in the command line, change directory (cd) into your theme folder and enter
npm install --save-dev gulp
- This installs gulp to your project
- Now enter
npm install --save-dev gulp-sass
- This installs the ability to compile Sass
- In order to run Gulp, your project will require a “gulpfile.js” (see below for a working example)
- Finally, go back tto the command line and enter
gulp
- 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']); });