Question

我想基于已定义的对象创建一组类，这些对象具有成对的键和值。这些类的应用并不重要，但是出于这个问题的原因，我想在某些视口中将display的值分配给block，在另一个视口中将其分配给none。

在代码中，所需的输出如下所示：

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

我遇到的问题是第二个媒体查询条件（因此该元素显示 BETWEEN （某些尺寸），而不是 UP TO 或 DOWN TO 一定大小）。

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

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

$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循环，但是他们仅处理列表，而从未处理具有配对键和值的对象。

Answer 1

您已到达目的地的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)。 Here's a working example in SassMeister。

使用SCSS以编程方式创建可见性类

1 个答案: