如何在 scss 中覆盖 map 合并？

Question

为基本问题道歉，但我对 SCSS 很陌生。 我在变量 SCSS 文件中有这个

$button-colors: () !default;
$button-colors: map-merge(
    (
      "success": #28a745,
      "info": #17a2b8,
      "warning": #ffc107,
      "error": #dc3545,
      "default": #343a40
    ),
    $button-colors
);

如何覆盖自定义文件中的 colors？

Answer 1

您可以使用要覆盖的相同值简单地创建另一个map 。

$button-colors: (
  "success": green,
  "warning": red
);

这是一个显示示例的JSFiddle

您也可以在此处阅读有关地图的主题

Answer 2

在@import sass 文件之前或代码开头轻松设置$button-colors变量的值。

关于!default更多信息在这里： https://sass-lang.com/documentation/variables#default-values

这一行$button-colors: ();default; 之前定义的$button-colors和之前未定义的 $button-colors 将空的 map 分配给$button-colors $button-colors的值将覆盖map-marge中定义的默认值。

有关map-marge的更多信息在这里： https://sass-lang.com/documentation/modules/map

map-marge将覆盖重复键的第一个 map 值上的第二个 map 值。

// overwriting values
$button-colors: (
    "info": #ccc,
    "error": #fff
);

@import <your sass file address or name>

或者

// overwriting values
$button-colors: (
    "info": #ccc,
    "error": #fff
);

$button-colors: () !default;
$button-colors: map-merge(
    (
      "success": #28a745,
      "info": #17a2b8,
      "warning": #ffc107,
      "error": #dc3545,
      "default": #343a40
    ),
    $button-colors
);