[英]How to override two maps in scss
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;
}
}
Result结果
.alert-primary {
color: green;
}
.alert-secondary {
color: purple;
}
.alert-black {
color: #000;
}
.alert-white {
color: #fff;
}
I wanted to create a SASS framework something like bootstrap.我想创建一个类似于 bootstrap 的 SASS 框架。 Wanted to override theme colors.想要覆盖主题颜色。 How can i merge these maps to get something like this?我怎样才能合并这些地图来得到这样的东西? I want a simple solution.我想要一个简单的解决方案。
Expected result预期结果
.alert-accent {
color: #ddd;
}
.alert-primary {
color: green;
}
.alert-secondary {
color: purple;
}
.alert-black {
color: #000;
}
.alert-white {
color: #fff;
}
You can use map-merge :您可以使用地图合并:
$colors: map-merge($colors, (
primary: green,
secondary: purple,
black: #000,
white: #fff
));
From the documentation, this function:从文档中,这个功能:
Returns a new map with all the keys and values from both
$map1
and$map2
.返回一个包含$map1
和$map2
所有键和值的新映射。This can also be used to add a new value or overrwrite a value in
$map1
, by passing a single key/value pair as$map2
.通过将单个键/值对作为$map2
传递,这也可用于添加新值或覆盖$map1
值。If both
$map1
and$map2
have the same key,$map2
's value takes precedence.如果$map1
和$map2
具有相同的键,则$map2
的值优先。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.