title: Compass, sass, media queries. "767px is not a valid css value"
body: <p>I'm writing some sass classes for a bootstrap-based website. Basically, I want to generate some helper classes. In this case, they are media-queries and flex.</p>
  
  <p>For each bootstrap screen size, (only, maximum or minimum) I want to add a "order" value from 0 to 12.</p>
  
  <p>There are 3 dimensions.</p>
  
  <ul>
  <li>the screen size (xs, sm, md, lg) : [SS]</li>
  <li>screen size boundary (maximum, minimum or only) : [SB]</li>
  <li>the flex order (0..12) : [FO]</li>
  </ul>
  
  <p>ex : </p>
  
  <p>[SS]-[SB]-flex-order-[FO]</p>
  
  <p>will give
  xs-only-flex-order-0
  xs-only-flex-order-1
  xs-only-flex-order-2
  xs-down-flex-order-0
  xs-up-flex-order-0
  ........</p>
  
  <p>To do this, I wrote this </p>
  
  <pre><code>$xs: (
    name : 'xs',
    min-size: 700,
    max-size: 1000
  );
  $sm: (
    name : 'sm',
    min-size: 1001,
    max-size: 1200
  );
  $sizes: $xs, $sm;
  
  
  @each $size in $sizes{
    @for $i from 1 through 12 {
  
      $name : map-get($size, name);
      $min-size : map-get($size, min-size);
      $max-size : map-get($size, max-size);
  
      .#{$name}-only-flex-order-#{$i} {
        @media all and (min-width : $min-size) and (max-width : $max-size){
          order : $i;
        }
      }
  
      .#{map-get($size, name)}-down-flex-order-#{$i} {
        @media((max-width : map-get($size, max-size))){
          order : $i;
        }
      }
      .#{map-get($size, name)}-up-flex-order-#{$i} {
        @media((min-width : map-get($size, min-size))){
          order : $i;
        }
      }
    }
  }
  </code></pre>
  
  <p>Though, I get an error  <code>(max-width: 767px) isn't a valid CSS value.</code></p>
  
  <p>It stepped through the first media query block and threw at the first media query block <code>(max-width : $max-size)</code> it encountered. </p>
  
  <p>Seems to me that <code>@media (max-width: 767px)</code> is a perfectly valid css value. </p>
  
  <p>What could be wrong?</p>