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

css, ruby-on-rails, sass, zurb-foundation

Solution

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

Problem

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

Original source