首页 > 技术文章 > sass map !default 属性覆盖

guangzan 2020-08-13 21:06 原文

定义一个 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 代码

推荐阅读