我正在尝试生成一个自动化系统来定义 SASS 中的颜色。
我有一张名为 $brand-colors 的颜色地图,我希望这张地图的颜色用于在第二张地图中生成色调和阴影,无论 $brand-colors 中有多少颜色。
这就是我到达的地方:
$brand-colors: (
brand-color: (
primary-color: #0096d6,
secondary-color: #1a4760,
),
) !default;
@function generate-map($map) {
@each $item, $colors in $map {
@each $color-name, $value in $colors {
@return(
$color-name: (
light-30: mix(white, $value, 30%),
light-20: mix(white, $value, 20%),
light-10: mix(white, $value, 10%),
base: $value,
dark-10: mix(black, $value, 10%),
dark-20: mix(black, $value, 20%),
dark-30: mix(black, $value, 30%),
),
);
};
};
};
$brand-palette: (
brand-palette:(
generate-map($_new-brand-colors)
),
) !default;
使用上面的代码,我从终端得到这个结果:
brand-palette:(
primary-color:(
light-30: #4db6e2,
light-20: #33abde,
light-10: #1aa1da,
base: #0096d6,
dark-10: #0087c1,
dark-20: #0078ab,
dark-30: #006996
)
)
简而言之,只取了第一个键值对,我不明白为什么。有人可以给我答案吗?