sass map !default 属性覆盖

定义一个 map:

$postMeaage: (
    categoriesBackground: #ff6b6b,
    tagsBackground: #ff6b6b #fbc531 #22a6b3 #10ac84 #0097e6,
) !default;

加上 !default 代表这个 map 是默认的,它可以被覆盖。当你准备覆盖它:

$postMeaage: (
    categoriesBackground: #f00,
    tagsBackground: #f00,
);

目前为止,它正常工作。当你期望覆盖单个属性时,你或许准备这样做:

$postMeaage: (
    tagsBackground: #f00,
);

此时,你会发现获取不到 categoriesBackground 的值,它并不能将 categoriesBackground 保留,而是将整个 map 重写。要实现覆盖单个属性的效果,在你声明这个 map 时,应该这样做:

$postMeaage: () !default;

$postMeaage: map-merge(
    (
        categoriesBackground: #ff6b6b,
        tagsBackground: #ff6b6b #fbc531 #22a6b3 #10ac84 #0097e6,
    ),
    $postMeaage
);

参考 bootstrap 代码

posted @ 2020-08-13 21:06  guangzan  阅读(341)  评论(0编辑  收藏  举报