css - Bootstrap v4 : What's the point of theme-color vs. 标准颜色变量？

Question

在 Bootstrap v4.0.0.beta.2 中，他们也使用了颜色映射，这允许我们使用像 theme-color("primary") 这样的颜色。而不是 $brand-primary现在。

我的问题是，当我添加自己的自定义 CSS 并想使用 Bootstrap 中的颜色时，使用主题颜色函数而不是仅仅获取它所基于的变量有什么好处，例如 $primary ?

在 Bootstrap 变量文件中，它们具有:

$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。

Answer 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 ， ETC...

相关: How to change the bootstrap primary color?