title: Using Sass Variables with CSS3 Media Queries
body: <p>I'm trying to combine the use of a Sass variable with @media queries as follows:</p>
  
  <pre><code>$base_width:1160px;
  
  @media screen and (max-width: 1170px) {$base_width: 960px;}
  @media screen and (min-width: 1171px) {$base_width: 1160px;}
  </code></pre>
  
  <p><code>$base_width</code> is then defined at various points in the stylesheet width percentage-based measurements to produce fluid layouts.</p>
  
  <p>When I do this, the variable seems to be recognized properly but the conditions for the media query are not.  For example, the above code produces an 1160px layout regardless of screen width.  If I flip-flop the @media statements like so:</p>
  
  <pre><code>@media screen and (min-width: 1171px) {$base_width: 1160px;}
  @media screen and (max-width: 1170px) {$base_width: 960px;}
  </code></pre>
  
  <p>It produces a 960px layout, again regardless of screen width.  Also note that if I remove the first line of <code>$base_width: 1160px;</code> it returns an error for an undefined variable.  Any ideas what I'm missing?</p>