指南针，sass，媒体查询。“767 is不是有效的css值”

Question

我正在为一个基于引导的网站编写一些sass类。基本上，我想生成一些助手类。在本例中，它们是媒体查询和flex。

对于每个引导屏幕大小，(仅，最大或最小)，我想添加一个“订单”值从0到12。

有三个维度。

• 屏幕大小(xs，sm，md，lg)：
• 屏幕大小边界(最大、最小或仅)：SB
• 灵活顺序(0..12)：FO

例：

SS挠曲-订单-FO

只会给xs.=‘5’>只给0 x.

为了做到这一点，我写了这个

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

不过，我得到了一个错误(max-width: 767px) isn't a valid CSS value.

它跨过第一个媒体查询块，向它遇到的第一个媒体查询块(max-width : $max-size)扔去。

在我看来，@media (max-width: 767px)是一个完全有效的css值。

有什么不对的？

Answer 1

通过使用额外的圆括号，您意外地创建了一个映射。虽然映射的语法看起来有点类似于媒体查询的语法，但在这里它们是无效的。

这是：

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

应该是这样：

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

相关：How to stop sass/compass evaluating "not print" in media query as "false"