title: How to use SASS logic within a CSS 3 media query
body: <p>I'm using saas via the compass framework and the blueprint/grid dependency. I want to be able to set the width of a column using a media query, like so:</p>
  
  <pre><code>// /src/partials/_base.scss
  $blueprint-grid-columns: 18;
  
  @media screen and (max-width: 1024px){
      // If screen res is 1024 or lower, then set grid width to 46px
      $blueprint-grid-width: 46px;
  }
  @media screen and (max-width: 1280px){
      $blueprint-grid-width: 50px;
  }
  @media screen and (max-width: 1600px){
      $blueprint-grid-width: 76px;
  }
  
  $blueprint-grid-margin: 8px;
  </code></pre>
  
  <p>This compiles to in /stylesheets/screen.css:</p>
  
  <pre><code>@media screen and (max-width: 1024px) {}
  @media screen and (max-width: 1280px) {}
  @media screen and (max-width: 1600px) {}
  </code></pre>
  
  <p>But the values in the rest of screen.css are not set accordingly. I guess that makes sense, since the $blueprint-grid-width variable is read at compile time, not run time.</p>
  
  <p>Is there a way to output a layout with different grid widths by using a media query to get screen resolution?</p>
  
  <p>Related github issue:<br>
  <a href="https://github.com/chriseppstein/compass/issues/302">https://github.com/chriseppstein/compass/issues/302</a></p>