False positive “undefined variable” error when compiling SCSS

Question

Getting an error message when compiling my SCSS using the ruby compass gem.

run: /var/lib/gems/1.8/gems/compass-0.12.2/bin/compass compile
out: unchanged sas         


        

Answer 1

A simpler explanation that probably fits most of the users here:

You're compiling all your sass, when you only need to compile the top level file

sass is commonly modularised as follows:

toplevel.scss
  include child1.scss
  include child2.scss (that also uses variables from child1.sass but does not import child1.scss)
  include child3.scss (that also uses variables from child1.sass but does not import child1.sass)

When compiling, you only need to compile toplevel.scss. Compiling other files on their own (eg, child2.scss) will generate errors about undefined variables.

In your gulpfile:

gulp.task('sass', function () {
  gulp
    .src('./static/scss/toplevel.scss') // NOT *.scss
    .pipe(sass())
    // Rest is just decoration
    .pipe(prefixer('last 2 versions', 'ie 9'))
    .pipe(gulp.dest('./static/css/dist'))
    .pipe(livereload(livereloadServer));
});