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

Question

我正在为基于 bootstrap 的网站写一些 sass 类。基本上，我想生成一些助手类。在这种情况下，它们是媒体查询和弹性。

对于每个 bootstrap 屏幕尺寸，（仅最大或最小）我想添加一个从 0 到 12 的 "order" 值。

有 3 个维度。

屏幕尺寸（xs、sm、md、lg）：[SS]
屏幕尺寸边界（最大、最小或仅）：[SB]
弹性订单 (0..12) : [FO]

例如：

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

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

为此，我写了这个

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

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

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

css

sass

media-queries

compass-sass