kalenjordan kalenjordan - 23 days ago 6
Sass (Sass) Question

False positive "undefined variable" error when compiling SCSS

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.

Answer

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)