如何覆盖 scss 中的地图合并？

Question

很抱歉回答这个基本问题，但我对 SCSS 还很陌生。我在变量 SCSS 文件中有这个

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

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

Answer 1

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

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

这里是 JSFiddle 展示的例子

Also you can read up on the topic of maps here

Answer 2

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

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

此行 $button-colors: () !default; 在 $button-colors 定义之前和未定义之前不执行任何操作，然后将空映射分配给 $button-colors； $button-colors 的值将覆盖 map-marge.

中定义的默认值

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

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

// 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
);

如何覆盖 scss 中的地图合并？

How to override map merge in scss?

css

sass