twitter-bootstrap - Bootstrap 4 主题颜色 : variables vs map

Question

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

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

或者通过像这样修改主题颜色映射:

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

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

Answer 1

事实上，最好总是覆盖 $theme-colors 中的主题颜色。 map 以确保在生成相应的 CSS 时替换 Bootstrap 稍后将使用这些颜色的颜色。 Bootstrap encourages to do so.
如果您决定覆盖默认颜色定义，您将覆盖颜色图本身的创建，因此 Bootstrap 将无法再访问默认颜色。
您可以执行以下操作:
选项 1
覆盖默认值(Bootstrap 不鼓励)。
选项 2
使用十六进制值覆盖 map :

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