Bootstrap 4主题颜色：变量vs地图

Question

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

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

或者像这样修改主题颜色贴图：

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

我们何时以及为何要使用其中一个？

Answer 1

事实上，总是覆盖$theme-colors地图中的主题颜色应该更好，以确保在生成相应的CSS时更换botstrap稍后将使用这些颜色的颜色。 Bootstrap encurages to do so.

如果您决定覆盖默认颜色定义，则将覆盖颜色贴图本身的创建，因此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
);