Question

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

试图对此进行阅读，但是找不到任何答案或解决方案来实现这一目标。

代码示例：

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

当前状况：每个循环一直循环遍历地图，直到到达终点为止。因此，它将创建5个选择器，其背景颜色作为地图中的值。

@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）来获取地图索引号，然后使用它在特定数字处停止循环：

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

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

1 个答案: