css - 直接在自定义的 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

用于生成按钮的 mixin css颜色状态称为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来处理按钮状态颜色是不可能的。 .

---

There are a few ways to customise the .btn active and hover state colours whilst minimising compiled css and avoiding duplicate/overriding selectors in compiled css output.

第一种方法(最简单)

参见scss下面处理 Bootstrap 供应商 @imports单独和处理定制vars和map-removals按照正确的顺序， Bootstrap 可以正确编译和使用变量。

关注 scss 中的评论所以你知道发生了什么......

// 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 map ， Bootstrap 将无法编译@each利用 $theme-colors 的循环因为它现在是空的。

我们现在可以手动使用button-variant() mixin 任意 .btn-*选择器来创建自定义按钮，而无需向编译输出添加额外的 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并修改/覆盖 @include button-variant()在mixins.scss .

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

此方法很难精确控制悬停和事件状态颜色，因为 @include button-variant()将使用相同的参数 scss对每种通过的颜色进行颜色调整。

你可以试试这个...重新介绍$theme-colors之前root.scss紧接着 $colors映射数组。

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

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

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

您可以将其放入名为 _mixins.scss 的 sass 文件中在您的元素中并像这样导入 @import "./mixins";保持一切整洁。

您还可以将这个元素的所有自定义 mixins 保存在“./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);
      }
    }
  }
}