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

Question

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

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

或者像这样修改主题颜色映射：

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

我们何时以及为什么要使用其中的一种？

Answer 1

事实上，最好始终覆盖 $theme-colors 映射中的主题颜色，以确保替换引导程序稍后在生成相应 CSS 时使用这些颜色的颜色。 Bootstrap encourages to do so.

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

您可以执行以下操作：

选项 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
);