使用字符串枚举作为地图 SCSS 的键

Question

我已经创建了一些断点以在特定屏幕宽度上隐藏 nth-child，我很想使用循环和映射使其更紧凑。单个媒体查询条件没问题，但我坚持创建地图，其中键可以是多个媒体查询条件，例如 @include media('<1000px', '>500px');。当我得到正确的地图时，键可以是任何字符串，所以理论上可以另外引用这个条件枚举并在循环中取消引用它，但它不起作用。有人可以帮我吗？

@import "include-media";

$map: (
    "'>500px', '<1000px'": '9',
    "'<400px'": '7'
);

@each $condition, $child in $map {
    @include media(unquote($condition)) {
        :nth-child(n+#{$child}) {
            display: none;
        }
    }
}

Answer 1

最初我试图用双引号引用一个字符串枚举以取消引用它并传递给 media 函数，但后来我意识到我的代码一切正常，发布在答案中，只是我不能通过一些参数作为带有字符串枚举的不带引号的字符串，这是不可能的。所以我正在寻找另一种存储条件补丁的方法，我想起了 SCSS 列表。这就是答案！

我不知道 SCSS 列表可以作为地图中的键，但这是。所以我只是将我需要的所有条件作为值放入键和子编号，然后遍历映射并通过解构将条件列表传递给 media 函数（我没有找到很多关于这个的信息运算符，不知道它是如何调用的:)）。所以就这样结束了：

$map: (
    ('>500px', '<1000px'): 9,
    ('<400px'): 7
);

@each $conditions, $child in $map {
    @include media($conditions...) {
        :nth-child(n + #{$child}) {
            display: none;
        }
    }
}

正在转换为

@media (min-width: 501px) and (max-width: 999px) {
  :nth-child(n+9) {
    display: none;
  }
}
@media (max-width: 399px) {
  :nth-child(n+7) {
    display: none;
  }
}

使用字符串枚举作为地图 SCSS 的键

Using string enumeration as key of map SCSS

sass