False positive "undefined variable" error when compiling SCSS

Solution 1:

You're generating files that don't need to be generated.

• screen.scss -> screen.css
• base.scss -> base.css
• catalog.scss -> catalog.css

The catalog file is being compiled on its own. Since it is not importing base.scss, the variables are not set. Your screen.scss file generates as you expect because it is importing all of the necessary information.

What you want to do is rename your partials to begin with an underscore to prevent them from being compiled on their own:

• screen.scss -> screen.css
• _base.scss (not compiled)
• _catalog.scss (not compiled)

Solution 2:

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

Solution 3:

I'd recommend looking into common Sass directory organizational structures. My personal favorite is The 7-1 Pattern.

The nature of it splits commonly used elements into other files, which are all imported by a main.scss to kill redundancies.

But also, firstly pay attention to @cimmanon's answer, as he more directly addresses your question.

Solution 4:

In your compass log it states:

A)  create css/generated/partial/catalog.css 
B)  create css/generated/partial/base.css

These need to be:

A)  create css/generated/partial/base.css
B)  create css/generated/partial/catalog.css 

My guess is that your screen.scss has incorrect import statements.