Bootstrap v4：主题颜色与标准颜色变量的意义何在？答案

【问题标题】：Bootstrap v4: What's the point of theme-color vs. standard color variable?Bootstrap v4：主题颜色与标准颜色变量的意义何在？
【发布时间】：2018-04-12 21:07:56
【问题描述】：

在 Bootstrap v4.0.0.beta.2 中，它们也使用了颜色映射，这使我们现在可以使用 theme-color("primary") 之类的颜色，而不是 $brand-primary。

我的问题是，当我添加自己的自定义 CSS 并想使用引导程序中的颜色时，我使用主题颜色函数而不是仅仅获取它所基于的变量，例如 @ 987654323@?

在他们拥有的引导变量文件中：

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

$theme-colors: () !default;
$theme-colors: map-merge((
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
), $theme-colors);

我为什么不直接使用$primary？或$gray-300?

我没有在我的自定义文件中做任何花哨的 SASS 东西，只是带有这些变量的标准 CSS。

【问题讨论】：

标签： css twitter-bootstrap sass bootstrap-4

【解决方案1】：

theme-colors() 主要由 Bootstrap 内部用于迭代所有主题颜色。有一堆组件，如按钮、徽章、警报等。它们是在 CSS 中为每种主题颜色“构建”的。而不是做..

   .badge-danger {
        @include badge-variant($danger);
   }
   .badge-warning {
        @include badge-variant($warning);
   }
   ...(repeat for each color)

这更容易......

@each $color, $value in $theme-colors {
  .badge-#{$color} {
    @include badge-variant($value);
  }
}

这也使得在使用需要使用所有主题颜色的新元素扩展或自定义 Bootstrap (like this for example) 时更容易使用。

但是，如果你“没有在我的自定义文件中做任何花哨的 SASS 东西，只是带有这些变量的标准 CSS”，那么只引用颜色变量是最简单的......

$primary、$gray-300 等...

【讨论】：