title: Why do I get an undefined Foundation variable error in this SASS file?
body: <p>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 <code>foundation_and_overrides.scss</code> file, I get the following error:</p>
  
  <pre><code>Undefined variable: "$header-font-family"
  </code></pre>
  
  <p>I've included relevant code below. I can post more if needed. Anyone know what's going on here?</p>
  
  <p>From <code>application.css</code>:</p>
  
  <pre><code>*
   *= require foundation_and_overrides
   *= require_self
   *= require_tree .
   */
  </code></pre>
  
  <p>From <code>foundation_and_overrides.scss</code>:</p>
  
  <pre><code>// We use these to control header font styles
  $header-font-family: "futura-pt", sans-serif;
  $header-font-weight: 400;
  // $header-font-style: normal;
  </code></pre>
  
  <p>From <code>custom.css.scss</code>:</p>
  
  <pre><code>$include-html-global-classes: false;
  @import "foundation/components/global";
  . 
  . 
  . 
  .footer {
    background-color: black;
    color: white;
    height: 100px;
    font-family: $header-font-family;
  }
  </code></pre>