直接在自定义 Bootstrap 4 中指定悬停颜色

Question

我正在使用 Bootstrap 4.5.3 的自定义版本，并进行了一些相当简单的更改。

这是我的自定义 SCSS：

$newcolor1: #00a89c;
$newcolor2: #e61b53;

$colors: (
    "newcolor1": $newcolor1,
    "newcolor2": $newcolor2
);

$primary:   $newcolor1;

$theme-colors: (
    "primary": $primary,
    "newcolor2": $newcolor2
);

@import "bootstrap";

我正在添加两种新颜色，将“primary”设置为 newcolor1，并为 newcolor2 添加一个主题，这样我就可以做例如btn-newcolor2.

Bootstrap 会自动计算这些颜色的变体以用于悬停、焦点等，这对我来说看起来不错，但我的客户想直接指定悬停颜色，这超出了我非常有限的 Sass 知识。

查看源文件，似乎 Bootstrap 将基色变暗了一个固定百分比以创建悬停版本。有没有办法强制它为 .btn-primary:hover 和 .btn-newcolor2:hover 使用特定颜色？理想的情况是，如果我可以让它使用我提供的指定颜色，并使用我没有提供的默认行为（以固定百分比变暗）。

Answer 1

用于生成按钮css颜色状态的mixin被称为button-variant()，它位于bootstrap/scss/mixins。

这个 sass mixin 确实具有处理自定义 .btn 悬停和活动颜色状态的参数功能...

@mixin button-variant(
  $background, 
  $border, 
  $hover-background: darken($background, 7.5%), 
  $hover-border: darken($border, 10%),
  $active-background: darken($background, 10%),
  $active-border: darken($border, 12.5%)
) { 
  //...
}

但正如您所见，悬停和活动参数是 $default: 参数，使用 sass colour darken() function 作为值来计算传递的 $theme-colors 颜色值以自动为状态生成颜色。

这使得仅使用$theme-colors 来处理按钮状态颜色是不可能的。

---

有几种方法可以自定义.btn 活动和悬停状态 颜色，同时最小化编译的css 并避免 在编译的css 输出中重复/覆盖选择器。

第一种方法（最简单）

请参阅下面的scss，它单独处理引导供应商@imports，并以正确的顺序处理自定义vars 和map-removals，因此引导程序可以正确编译和使用变量。

关注scss 中的 cmets，让您知道发生了什么...

// import initial bootstrap vendors

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// remove unused default bootstrap colours from bs colour maps to prevent larger compiled css file sizes
// this will also speed up compiling time as you are not generating css for all bootstrap standard colours
// if you wish to keep some standard bootstrap colours then remove the ones you want to keep from the map-remove lists below

$colors: map-remove($colors, "blue","indigo","purple","pink","red","orange","yellow","green","teal","cyan","white","gray","gray-dark");
$grays: map-remove($grays, "100","200","300","400","500","600","700","800","900");
$theme-colors: map-remove($theme-colors, "primary","secondary","success","danger","warning","info","light","dark");

// use sass @debug to check dump logs of your colour maps after modifying them if you wish...

// @debug $colors;
// @debug $grays;
// @debug $theme-colors;

// now add your custom colour variables

$new-color-1: #00a89c;
$new-color-2: #e61b53;

// now add your custom colour maps using above variables

$colors: (
  "newcolor1": $new-color-1,
  "newcolor2": $new-color-2
);

// you can always tidy this up by including these variables and any other bootstrap theming override variables into a separate sass _vars.scss file
// and then import _vars.scss here (before root.scss and after mixins.scss|map-removals)...

//@import "./vars";

// now import the rest of your needed bootstrap scss vendor files below this
// the below imports will now use any variable overrides you've defined above

// if you want to reduce you css output file size and speed up compiling
// you can remove unused scss vendor imports below, for example i've removed breadcrumb, toasts and carousel

@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
//@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/media";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
//@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
//@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/print";

因为我们清空了$theme-colors 映射，所以引导程序不会编译使用$theme-colors 的@each 循环，因为它现在是空的。

我们现在可以在任何 .btn-* 选择器中手动使用 button-variant() mixin 来创建自定义按钮，而无需在编译输出中添加额外的 css。

此选项最简单，因为您可以将任何您希望的颜色传递给 button-variant() 参数。

.btn-primary {
  @include button-variant(
    $new-color-1, // background
    $new-color-1, // border
    $new-color-1, // hover background (customise how you wish)
    $new-color-1, // hover border (customise how you wish)
    $new-color-1, // active background (customise how you wish)
    $new-color-1 // active border (customise how you wish)
  );
}

.btn-secondary {
  @include button-variant(
    $new-color-2, // background
    $new-color-2, // border
    $new-color-2, // hover background (customise how you wish)
    $new-color-2, // hover border (customise how you wish)
    $new-color-2, // active background (customise how you wish)
    $new-color-2 // active border (customise how you wish)
  );
}

---

第二种方法（更复杂）

使用上面的代码，重新引入$theme-colors并修改/覆盖mixins.scss中的@include button-variant()。

在继续之前从上述代码中删除了自定义按钮选择器。

此方法更难以精确控制悬停和活动状态颜色，因为@include button-variant() 将对每个传递的颜色使用相同的参数scss 颜色调整。

你可以试试这个...在 root.scss 之前和 $colors 映射数组之后立即重新引入 $theme-colors。

$theme-colors: (
  "primary": $new-color-1,
  "secondary": $new-color-2
);

然后创建一个覆盖按钮 mixin 来处理所有按钮变体调用。

在 @import "~bootstrap/scss/mixins"; 之后和 map-removals 之前添加这个 bootstrap v4.5.3 修改的按钮变体混合。

您可以将其放在项目中名为 _mixins.scss 的 sass 文件中，然后像这样导入 @import "./mixins"; 以保持整洁。

您也可以将此项目的所有自定义 mixin 保存在“./mixins”中。

现在我们可以修改自定义的@mixin button-variant()参数来处理传递的$theme-colors。

// i've customised params in the button-variant() mixin below as an example
// see original default mixin params as comments below

// $background
// $border
// $hover-background: darken($background, 7.5%)
// $hover-border: darken($border, 10%) 
// $active-background: darken($background, 10%)
// $active-border: darken($border, 12.5%)

@mixin button-variant(
  $background,
  $border,
  $hover-background: lighten($background, 10%),
  $hover-border: lighten($border, 10%),
  $active-background: lighten($background, 2.5%),
  $active-border: lighten($border, 2.5%)
) {
  color: color-yiq($background);
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  @include hover() {
    color: color-yiq($hover-background);
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  &:focus,
  &.focus {
    color: color-yiq($hover-background);
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
    }
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    color: color-yiq($background);
    background-color: $background;
    border-color: $border;
    // Remove CSS gradients if they're enabled
    @if $enable-gradients {
      background-image: none;
    }
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: color-yiq($active-background);
    background-color: $active-background;
    @if $enable-gradients {
      background-image: none; // Remove the gradient for the pressed/active state
    }
    border-color: $active-border;

    &:focus {
      @if $enable-shadows and $btn-active-box-shadow != none {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
      }
    }
  }
}