SCSS-如何在地图合并中循环嵌套地图？

我有一个运行良好的SCSS函数，可以调用任何颜色，如下所示：

color: clr(milk);

现在，我想在地图合并中进行某种循环，这样，例如，当我添加一个名为“三级”的新嵌套地图和一些其他颜色时，这些颜色将自动变为可用，而无需添加

map-get(colors, 'tertiary')

到地图合并。有人知道怎么做吗？以下是我目前的职能：

$colors: (
    primary: (
        milk: #fff,
        cola: #000,
        mine-shaft: #232323,
    ),
    secondary: (
        pampas: #f4f1ef,
        pearl-brush: #e9e2dd,
        alto: #ddd,
    ),
);

// Color generation
@function clr($color) {
    $color: map-get(map-merge(map-get($colors, 'primary'), map-get($colors, 'secondary')), $color);

    @return $color;
}

---

好项目

map-merge（）

确实可以用来实现您想要的，但是它增加了一个不必要的步骤。我建议只使用嵌套循环和

@if

语句

@function clr($find) {
  @each $colorCategoryName, $colorCategory in $colors {
    @each $colorName, $color in $colorCategory {
      @if $find == $colorName {
        @return $color;
      }
    }
  }
}

例如：这个

$colors: (
  "primary": (
    "milk":       #fff,
    "cola":       #000,
    "mine-shaft": #232323,
  ),
  "secondary": (
    "pampas":      #f4f1ef,
    "pearl-brush": #e9e2dd,
    "alto":        #ddd,
  ),
);

@function clr($find) {
  @each $colorCategoryName, $colorCategory in $colors {
    @each $colorName, $color in $colorCategory {
      @if $find == $colorName {
        @return $color;
      }
    }
  }
}

body {
  color: clr(cola);
  background-color: clr(pampas);
}

将输出：

body {
  color: #000;
  background-color: #f4f1ef;
}

---

如果这不是你想要的，请告诉我

这正是我要找的！非常感谢你！