ruby on rails - SASS variables not parsing correctly - Undefined variable: "$ct-white"

Question

I am using SASS for the first time, and my variables seem to have stopped working. I have the following code in my application.css.scss file:

*= require_self
*/
@import "layout";
@import "colors";
...
@import "text";

In my partial _colors.css.scss file, there is:

...
$ct-white: #F8F8F8 !global;

and in my partial _layout.css.scss file (the Rails default layout file):

/* Site-wide layout syntax */
body {
  background-color: $ct-white;
}

I know that the _layout.css.scss file is loading because other styles on the page work fine when I set body { background-color: #F8F8F8; }. For some reason, the variable isn't being parsed correctly.

Any ideas why?

Answer 1

You're importing colors after layout , so the variables you define in colors are not available for layout. You could simply invert the order of those two lines. In SASS, import order matters.