Compass is not able to find mixins

Question

I am trying basic sass + compass in gulp to build css. When i run the task I get an error Error: error main.scss (Line 2: Undefined mixin 'user-select'.) I have both sass and compass installed. Same story is happening with gulp-compass.

Any ideas what is wrong with my configuration?

Minimal configuration that is behaving this way for me:

My gulpfile.js

var gulp = require('gulp'); 
var sass = require('gulp-ruby-sass');

gulp.task('sass', function () {
gulp.src('./scss/*.scss')
    .pipe(sass({ compass: true, sourcemap: true, style: 'compressed' }))
    .pipe(gulp.dest('./css'));
});

My sass file:

%button {
  @include user-select('none');
}

.button-orange {
  @extend %button;
  background-color: orange;
}

I don't have config.rb for compass. Looking for a way of setting it up without it.

Answer 1

Changing first line of the scss form @import "compass/css3/user-interface"; to this line @import "compass/css3"; helped for this problem

I also run $ compass create - at this point I am not sure that this changed anything.

Answer 2

You can omit using of Compass compiler at all. Just import Compass into your SASS file.

1. Install the library:

   bower install compass-sass-mixins
   

2. Import the compass into your SASS file:

   @import "bower_components/compass-sass-mixins/lib/compass"