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

Question

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

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

或者通过修改主题颜色映射来实现：

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

何时以及为什么我们应该使用其中之一？

- slacle

Answer 1

事实上，最好始终在$theme-colors映射中覆盖您的主题颜色，以确保替换bootstrap稍后生成相应CSS时将使用这些颜色的位置。 Bootstrap鼓励这样做。 如果您决定覆盖默认颜色定义，则将覆盖颜色映射本身的创建，因此bootstrap将不再访问默认颜色。

你可以这样做：

选项1

覆盖默认值（不被Bootstrap鼓励）。

选项2

覆盖映射，使用十六进制值：

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

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

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

选项三

您可以定义自己的变量集以覆盖映射，这样您将始终可以访问自己的变量，而无需使用map_get：

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

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

- muecas

---

覆盖地图而不是变量的问题在于，我们无法在自己的Sass文件中访问新颜色的变量。 - slacle

你可以定义自己的一组变量，并使用这些变量来覆盖地图；这样，你就可以访问自己的变量，并根据 Boostrap 文档的建议更改主题。你始终可以使用 map_get 来获取值。例如，如果你从地图中覆盖了 primary 值，你可以使用 map_get($theme_colors, 'primary'); 来获取它的值。 - muecas

@slacle，我已经更新了我的答案以更好地满足您的需求。如果有帮助，请告诉我。 - muecas

@muesca 是的，我们在 SCSS 文件中覆盖了按钮颜色，就像上面我们覆盖了边框颜色一样。 - Vishal Tanna

对于使用 Bootstrap 5 的其他人来说，$primary: [color] 是首选方法：https://getbootstrap.com/docs/5.0/customize/sass/#maps-and-loops - Jeffrey Martinez