SCSS-如何在映射合并中循环嵌套映射

Question

我有一个工作良好的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;
}

Answer 1

不错的项目！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;
}

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