css - 是否可以创建一个循环来循环遍历 map ，但停在 map 中的某个索引处？ - SASS

Question

我有一个包含五种颜色的颜色主题图，我想创建一个 mixin 来接受一个作为停止点的数字参数。然后 mixin 将执行循环，但是当它到达 mixin 参数编号时停止 map 循环。

试图阅读此内容，但找不到任何答案或解决方案来实现这一点。

代码示例:

// color map
$colors: (
 "r": red,
 "b": blue,
 "g": green,
 "y": yellow,
 "o": orange,
)

当前情况:each 循环不断循环遍历 map ，直到到达终点。因此它将创建 5 个选择器，它们的背景颜色作为 map 中的值。

@mixin color_theme($map) {
  @each $col, $color in $map {
    &.#{$col} {
      background-color: $color;
    }
  }
}

目标:创建一个带有循环的 mixin，仅循环到映射中固定数量的值。

Answer 1

您可以使用 index(相关答案:SASS - get map item value by item index)获取 map 索引号，然后使用它在某个数字处停止循环:

// color map
$colors: (
 "r": red,
 "b": blue,
 "g": green,
 "y": yellow,
 "o": orange
);

@mixin color_theme($map, $stop) {
  @each $col, $color in $map {
    $i: index($map, $col $color);
    @if ($i <= $stop){
      &.#{$col} {
        background-color: $color;
      }
    }
  }
}

div{
  @include color_theme($colors, 4);
}

你的输出:

div.r {
  background-color: red;
}
div.b {
  background-color: blue;
}
div.g {
  background-color: green;
}
div.y {
  background-color: yellow;
}