如何在 scss 中覆盖两个映射

Question

SCSS

$colors: (
primary:      red,
secondary:    blue,
accent:       #ddd,
) !default;
$colors: (
primary:      green,
secondary:    purple,
black:        #000,
white:        #fff,
);
@each $color, $value in $colors {
.alert-#{$color} {
color: $value;
}
}

结果

.alert-primary {
color: green;
}
.alert-secondary {
color: purple;
}
.alert-black {
color: #000;
}
.alert-white {
color: #fff;
}

我想创建一个类似于引导的 SASS 框架。想要覆盖主题颜色。如何合并这些地图以获得这样的东西？我想要一个简单的解决方案。

预期成果

.alert-accent {
color: #ddd;
}
.alert-primary {
color: green;
}
.alert-secondary {
color: purple;
}
.alert-black {
color: #000;
}
.alert-white {
color: #fff;
}

Answer 1

您可以使用映射合并：

$colors: map-merge($colors, (
primary:      green,
secondary:    purple,
black:        #000,
white:        #fff
));

从文档中，此函数：

返回一个新映射，其中包含来自$map1和$map2的所有键和值。

这也可以用来添加一个新值或覆盖$map1中的值，通过传递单个键/值对作为$map2。

如果$map1和$map2具有相同的键，则$map2的值优先。