CODEWITHSUNDEEP
ruby-on-railscsssasszurb-foundation
blundin
blundin

Reputation: 1643

Why do I get an undefined Foundation variable error in this SASS file?

I have a Rails 4 app, using the foundation-rails v5.2.1.0 gem, and one custom SCSS file for my application layout. When I use a variable from the foundation_and_overrides.scss file, I get the following error:

Undefined variable: "$header-font-family"

I've included relevant code below. I can post more if needed. Anyone know what's going on here?

From application.css:

*
 *= require foundation_and_overrides
 *= require_self
 *= require_tree .
 */

From foundation_and_overrides.scss:

// We use these to control header font styles
$header-font-family: "futura-pt", sans-serif;
$header-font-weight: 400;
// $header-font-style: normal;

From custom.css.scss:

$include-html-global-classes: false;
@import "foundation/components/global";
. 
. 
. 
.footer {
  background-color: black;
  color: white;
  height: 100px;
  font-family: $header-font-family;
}

Upvotes: 3

Views: 1976

Answers (3)

HelloMundo
HelloMundo

Reputation: 15

According to the Rails Docs:

If you want to use multiple Sass files, you should generally use the Sass >@import rule instead of these Sprockets directives. When using Sprockets >directives, Sass files exist within their own scope, making variables or >mixins only available within the document they were defined in.

So in this case the order of the directives (the lines in application.css that start with *=) doesn't matter because each of those files lives in its own scope and you can't access their variables from another scss file. That's why you want to either @import foundation_and_overrides and then custom, or @import your custom stylesheet into foundation_and_overrides.

Upvotes: 0

Joshua
Joshua

Reputation: 63

The cleanest way is to add the line

@import "custom";

to your file foundation_and_overrides.scss before the line

@import "foundation";

There's no need to remove *= require_tree . from application.css.scss as stated in the accepted answer. There's also no need to add require foundation_and_overrides to application.css if you leave require_tree . in there.

Upvotes: 0

Monideep
Monideep

Reputation: 2810

You are getting the error because foundation_and_overrides.scss is executing after custom.css.scss. Best way to do this is to define your variables in a partial and import it in your main stylesheet after foundation.

First change the file name from

foundation_and_overrides.scss to _foundation_and_overrides.scss

and then import it in custom.css.scss file after foundation with

@import 'foundation_and_overrides';

Update

Rename your application.css to application.css.scss and custom.css.scss to custom.scss

In your application.css.scss remove *= require_tree .

And then import your main stylesheet with

@import 'custom'

I hope this helps

Upvotes: 5

Related Questions