Compass, sass, media queries. "767px is not a valid css value"

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.

For each bootstrap screen size, (only, maximum or minimum) I want to add a "order" value from 0 to 12.

There are 3 dimensions.

the screen size (xs, sm, md, lg) : [SS]
screen size boundary (maximum, minimum or only) : [SB]
the flex order (0..12) : [FO]

ex :

[SS]-[SB]-flex-order-[FO]

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 ........

To do this, I wrote this

$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;
      }
    }
  }
}

Though, I get an error (max-width: 767px) isn't a valid CSS value.

It stepped through the first media query block and threw at the first media query block (max-width : $max-size) it encountered.

Seems to me that @media (max-width: 767px) is a perfectly valid css value.

What could be wrong?

Solution

You've accidentally created a mapping by using an extra set of parentheses. While the syntax for mappings looks somewhat similar to the syntax for media queries, they are not valid here.

This:

.#{map-get($size, name)}-down-flex-order-#{$i} {
  @media((max-width : map-get($size, max-size))){
    order : $i;
  }
}

Should be this:

.#{map-get($size, name)}-down-flex-order-#{$i} {
  @media(max-width : map-get($size, max-size)){ // minus a set of parentheses
    order : $i;
  }
}