Sass::SyntaxError Undefined Variable [duplicate]

Question

This question already has an answer here:

• False positive “undefined variable” error when compiling SCSS 4 answers

I'm new to the Asset Pipeline, so let me know if I'm doing things wrong.

Using Rails 3.2 with SASS. I have a configuration partial that defines a bunch of SASS variables that I want to use throughout my scss files. Per this guide, I import configuration first, then bonus. However, I keep getting a Sass::SyntaxError saying Undefined variable: "$darkRed" in bonus.css.scss. What am I doing wrong?

application.css.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
*/

@import "configuration";
@import "bootstrap";
@import "bonus";

_configuration.css.scss

//colors
$darkRed: #B94A48;
$controlColor: #777;

bonus.css.scss

div.give-inline-help .help-inline
  {
  color: $darkRed;
  font-size: 15px;
  font-family: MuseoSans-300;
  padding-left: 0px;
}

Answer 1

You import scss file with wrong name in application.css.scss:

replace: @import "configuration";

with: @import "_configuration";

or rename your _configuration.css.scss file to configuration.css.scss

Answer 2

So I bumped into this and wanted to give a more precise answer:

Any @imported file in the chain downstream from a non-underscore named file will break with Sass::SyntaxError Undefined Variable.

With Sass, if you want to override variables, you must ensure you use an uninterrupted chain of underscored files.

It's as simple as that, though sometimes very easy to pass by!