指南针，萨斯，媒体查询。 "767px is not a valid css value"

Question

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

对于每个引导程序屏幕大小，（仅限，最大或最小）我想添加一个从0到12的"顺序"值。

共有3个维度。

• 屏幕大小（xs，sm，md，lg）：[SS]
• 屏幕大小边界（最大、最小或仅限）：[SB]
• 弹性订单（0..12）：[FO]

例如：

[SS]-[SB]-弹性订单-[FO]

将给予xs-on-flex-order-0xs-on-flex-order-1xs-on-flex-order-2xs-down-flex-order-0xs-up-flex-order-0…….

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

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

它跨过第一媒体查询块并且向它遇到的第一媒体查询区块CCD_ 2抛出。

在我看来，@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;
  }
}

相关：如何停止sass/指南针评估"；不打印"；在媒体查询中；false"；