Gulp can't seem to find compass mixins

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

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 2

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 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'));
});