指南针，sass，媒体查询。 ＆＃34; 767px不是有效的css值＆＃34;

Question

我正在为基于引导程序的网站编写一些sass类。基本上，我想生成一些辅助类。在这种情况下，它们是media-queries和flex。

对于每个引导程序屏幕大小，（仅限，最大或最小）我想添加一个＆＃34;命令＆＃34;值从0到12。

有三个维度。

• 屏幕尺寸（xs，sm，md，lg）：[SS]
• 屏幕尺寸边界（最大值，最小值或仅限）：[SB]
• 弹性顺序（0..12）：[FO]

前：

[SS] - [SB] -flex-命令 - [FO]

会给 XS-只有柔性阶0 XS-只有柔性阶1 XS-只有柔性阶2 XS-向下弯曲阶0 XS-了柔性阶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.

它逐步浏览了第一个媒体查询块并抛出了它遇到的第一个媒体查询块(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"