1

我想创建一组基于已定义对象的类，并带有成对的键和值。这些类的应用并不重要，但是为了这个问题，假设我想在某些视口和另一个视口上分配display值。blocknone

在代码中，所需的输出将是这样的：

.visible-sm {
  display: none;
  @media screen and (max-width: 576px) and (min-width: 320px) {
    display: block !important;
  }
}

.visible-md {
  display: none;
  @media screen and (max-width: 768px) and (min-width: 576px) {
    display: block !important;
  }
}

.visible-lg {
  display: none;
  @media screen and (max-width: 992px) and (min-width: 768px) {
    display: block !important;
  }
}

我遇到的问题是第二个媒体查询条件（因此元素显示在某些尺寸之间，而不是向上或向下到特定尺寸）。

到目前为止我尝试了什么？

用预定义的断点声明对象：

$viewport-breakpoints: (
  xs: 320px,
  sm: 576px,
  md: 768px,
  lg: 992px
);

并遍历对象，在尝试应用简单算术的同时创建适当的类

@each $breakpoint in $viewport-breakpoints {
  $breakpoint-down: #{nth($breakpoint - 1)};
  .visible-#{nth($breakpoint, 1)} {
    display: none;
    @media screen and (max-width: #{nth($breakpoint, 2)}) and (min-width: #{nth($breakpoint-down, 2)}) {
      display: block !important;
    }
  }
}

我希望该$breakpoint-down变量会降低迭代的索引（因此，如果我们在md，将继续sm，等等），但不幸的是它不会工作（甚至不会编译）。

如果我要删除第二个媒体查询条件，它会创建让元素对某些断点可见的类，但是就像我上面提到的那样，我希望它们仅在某些值之间应用样式。

我错过了什么？

我们暂时不用担心第一对和最后一对对象的边缘情况。;)

我在这里看到过类似的线程，人们解释了如何使用 SCSS 循环，但他们只处理列表，从不处理具有成对键和值的对象。

4

1 回答 1

2

你已经完成了 90% 的路。您的问题是$breakpoint - 1无效的，因为$breakpoint它不是一个数字：在这种情况下，$breakpoint是一个键值对，例如xs 320px. 幸运的是，我们可以使用以下方法访问该键值对的每一部分nth()：

$map: (
  xs: 320px,
  sm: 576px,
  md: 768px,
  lg: 992px
);

@each $key, $val in $map {

  $index:                  index($map, $key $val);
  $previous-keyvalue-pair: nth($map, $index - 1);
  $previous-key:           nth($previous-keyvalue-pair, 1); // Not required for this question
  $previous-val:           nth($previous-keyvalue-pair, 2); // This is the one you need

  .visible-#{$key} {
    display: none;

    @if ($index > 1) { // To prevent accessing nth($map, 0) which would be invalid
      @media screen and (max-width: $val) and (min-width: $previous-val)) {
        display: block !important;
      }
    }
  }
}

另一种写法$previous-val是nth(nth($map, $index - 1), 2). 这是 SassMeister 中的一个工作示例。

于 2018-08-01T16:10:46.820 回答