Gulp can't seem to find compass mixins - sass

Question

I am trying out gulp as an alternative build tool to Grunt, to compile my scss to css, as I have heard it can be much faster.
I having problems doing even a basic compile of my scss files. I have tried using the gulp-sass, gulp-ruby-sass and gulp-compass plugins for gulp and I get pretty much the same error message every time:
error screen.scss (Line 2 of _grid.scss: Undefined mixin 'box-sizing'.)
So it looks like it is falling down as soon as it hits a compass mixin. I have ruby installed on my PC with compass version 1.0.0.alpha.19 and sass version 3.3.7.
Here is my gulpfile:
var gulp = require('gulp'),
compass = require('gulp-compass'),
sass = require('gulp-ruby-sass');
gulp.task('compass', function() {
gulp.src('../sass/UK/screen.scss')
.pipe(compass({
css: '../css',
sass: '../sass',
sourcemap: true,
style: 'compressed'
}))
.pipe(gulp.dest('../css/UK/screen.css'));
});
gulp.task('sass', function () {
gulp.src('../sass/UK/**/*.scss')
.pipe(sass({ style: 'compressed', sourcemap: true }))
.pipe(gulp.dest('../css/UK'));
});
Any ideas how I tell it where my copy of compass is installed? I thought it was installed globally.

Answer 1

There is bit of confusion around using Compass with Gulp. There are three gulp extensions: gulp-ruby-sass, gulp-compass and gulp-sass. They basically do the same thing. They compile SASS to CSS. But:
gulp-ruby-sass: Is a wrapper around command line tool: sass that comes with the language. It is written in Ruby and it is installed via gem - Ruby's package manager.
gulp-compass: Is a wrapper around command line tool: compass that comes with Compass framework. It is written in Ruby and it is also installed via gem. However, Compass is just a framework. It consists of SASS files only. All that compass command do, is setting paths to framework SASS files to sass command so that Compass dependencies are being resolved.
gulp-sass: Is a wrapper around tool: node-sass which is Node.JS binding to libsass: a C/C++ implementation of a Sass compiler.
The above answers did not work for me since I am using gulp-sass. It does not see Compass files out of the box. So first I installed compass-mixins (SASS files of Compass framework) and later I imported them with compass-importer:
import compass from 'compass-importer';
import sass from 'gulp-sass';
gulp.task('styles', function () {
return gulp.src(config.styles.src)
.pipe(sass({
importer: compass
})
.pipe(gulp.dest(config.styles.dest))
})

Answer 2

You right, compass should be installed globally on your system to get this work, at least easily. I recommend you to uninstall sass and compass to get something clean using
gem uninstall sass && gem uninstall compass
And then re-install them with :
gem install sass
gem install compass --pre
And after you can define a gulp task like so
gulp.task('compass', function () {
return gulp.src('../sass/UK/screen.scss')
.pipe(sass({ compass: true, sourcemap: true, style: 'compressed' }))
.pipe(gulp.dest('../css/UK/screen.css'));
});

Answer 3

Notice that gulp-ruby-sass has a new syntax which should look like:
gulp.task('compass', function ()
sass(../sass/UK/screen.scss, { compass: true, sourcemap: true, style: 'compressed' })
.pipe(gulp.dest('../css/UK/screen.css'));
});