title: Foundation 5 Media Queries Sass Error
body: <p>I'm trying to use Foundation 5's new media queries. I created a <code>foundation_overrides.scss</code> file and added a link to its css file below the link to my <code>app.css</code> file in <code>index.html</code> head tag:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="stylesheets/app.css" /&gt;
  &lt;link rel="stylesheet" href="stylesheets/foundation-overrides.css" /&gt;
  </code></pre>
  
  <p>...here's <code>app.scss</code>:</p>
  
  <pre><code>@import "settings";
  @import "foundation";
  </code></pre>
  
  <p>...and <code>foundation-overrides.scss</code>:</p>
  
  <pre><code>@media #{$small-up} { 
    body {background: red;} 
  } 
  @media #{$medium-up} { 
    body {background: orange;} 
  } 
  @media #{$large-up} { 
    body {background: yellow;} 
  } 
  @media #{$xlarge-up} { 
    body {background: green;} 
  } 
  @media #{$xxlarge-up} { 
    body {background: blue;} 
  }
  </code></pre>
  
  <p>Unfortunately this returns the following Sass error:</p>
  
  <blockquote>
    <p>Syntax error: Undefined variable: "$small-up"</p>
  </blockquote>
  
  <p>I've also tried uncommenting the <code>@import "foundation/functions";</code> line from <code>_settings.scss</code> yet the error persists.</p>
  
  <p>What do I need to change to use these media queries?</p>