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 sass/partial/grid.scss
out:     error sass/partial/catalog.scss (Line 5: Undefined variable: "$paragraphFont".)
out:    create css/generated/partial/catalog.css 
out:    create css/generated/partial/base.css 
out: overwrite css/generated/screen.css

My screen.scss imports partials like this:

@import "partial/base";
@import "partial/catalog";

In my base partial I have the $paragraphFont defined.

$paragraphFont: 'Lucida Sans', arial;
$regularFontSize: 14px;

And in catalog.scss I use it:

.product-view #price-block {
    p {
        font-weight: normal;
        font-family: $paragraphFont;
        ....
    }
}

Weird thing is that the css gets compiled just fine, and the $paragraphFont is populated correctly. So I don't know why the compiler is complaining at me about an error.

Are you sure this error is right? I've just checked this and it work fine with no errors — Prisoner, Jul 31 '13 at 17:03
This is also a problem while *watching*, because it causes the file to be recompiled on its own. — Erwin Wessels, Sep 07 '17 at 06:56

score 188 · Accepted Answer · answered Jul 31 '13 at 17:23

188

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)

answered Jul 31 '13 at 17:23

cimmanon

67,211
17
165
171

14

Thanks! I had always wondered why so many example scss files I saw had leading underscores, but was too lazy to figure out why! – kalenjordan Aug 01 '13 at 18:21
Thank you! It helped me a lot from saving my time from 2 mins to 2 secs. Thanks a lot. I give it +1 :) – Unknown User Mar 11 '15 at 17:12
God helping, you made understand the compilation process in a few words. – Cyril CHAPON Sep 02 '15 at 11:34
1

never heard about this until it happen to me – Andres Felipe Aug 06 '16 at 21:08
Thanks firstly. I have a follow up question: What if a partial say _abc.scss depends on screen.scss in the above context, and then I see an error: Undefined variable: "$paragraphFont", and say I don't have control on screen.scss as its part of external library. How can I fix this? – brownmamba Sep 28 '18 at 22:24
It was the underscore thing for me too. Most of the tutorials I looked at did not make that clear. – Stonecraft Sep 22 '21 at 03:00

mikemaccana · Answer 2 · 2017-07-19T13:12:14.333

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

In your first code example, the first file's extension is `.sass` and the others are `.scss`. Is there any particular reason why? — rinogo, Jul 17 '17 at 16:38

score 5 · Answer 3 · answered Jul 31 '13 at 17:16

5

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.

answered Jul 31 '13 at 17:16

JerryHuang.me

1,790
1
11
21

+1 Thanks! That makes sense. I actually hadn't realized it was creating them in the wrong order like that! But I was careful to `@import` them in the right order with base coming first. But cimmanon's answer above took care of me for now. Thanks again for your help! – kalenjordan Aug 01 '13 at 18:23

score 5 · Answer 4 · answered Nov 15 '16 at 18:58

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.

False positive "undefined variable" error when compiling SCSS

4 Answers4

Linked

Related