Bootstrap 4主题颜色：变量与映射

Question

在Bootstrap 4中，可以通过覆盖如下变量来更改主题颜色：

$primary: #0074d9;
$danger: #ff4136;

或通过如下修改主题颜色地图：

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

我们何时，为什么要在另一个上使用？

Answer 1

实际上，最好始终覆盖$theme-colors地图中的主题颜色，以确保替换以后在生成相应CSS时botstrap将使用这些颜色的颜色。Bootstrap鼓励这样做。

如果您决定覆盖默认颜色定义，则将覆盖颜色图本身的创建，因此引导程序将无法再访问默认颜色。

您可以执行以下操作：

选项1

覆盖默认值（Bootstrap不建议使用）。

选项2

使用十六进制值覆盖地图：

$theme-colors : (
    'primary' : #0074d9,
    'danger'  : #ff4136
);

然后，您可以使用来访问任何主题颜色map_get：

$my-color : map_get($theme-colors, 'primary'); // #0074d9

选项3

您可以定义自己的变量集来覆盖地图，然后始终可以访问变量，而无需使用map_get：

$my-primary-color : #0074d9;
$my-danger-color  : #ff4136;

$theme-colors : (
    'primary' : $my-primary-color,
    'danger'  : $my-danger-color
);