Bootstrap 5 按钮变体混合梯度解释？

Question

我一直在研究使用 mixins 的 Bootstrap 5 按钮的自定义 scss 样式。 用户 ZIM 在“如何在 Bootstrap 中更改 btn 颜色”帖子中的回答非常有用，并且清楚地展示了按钮变体的语法是如何工作的。

但是，我找不到任何关于 mixin 内部渐变如何工作的明确解释（根据 Bootstrap 5 文档）。

按钮页面上的 mixin 示例中有一个 @includegradient-bg($background) ，我似乎无法弄清楚如何将线性渐变传递给它或如何将其包含在假设的“.btn-”中定制”类？此外，如何使用按钮变体定义具有不同渐变背景的悬停类？

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

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

有人可以解释一下 mixin 的这一部分吗？

提前致谢。

Answer 1

首先，请注意，在最新版本的 Bootstrap（5.3.2 及以上版本）中，按钮 mixin 代码已使用 CSS 变量进行了更新。

gradient-bg mixin 用于创建渐变。你可以在Bootstrap 5.1.x中检查这个mixin，如下所示：

@mixin gradient-bg($color: null) {
  background-color: $color;

  @if $enable-gradients {
    background-image: var(--#{$variable-prefix}gradient);
  }
}

如果启用

$enable-gradients

变量，它将创建渐变背景图像。否则，它将提供简单的背景颜色。

要创建具有渐变背景的自定义按钮，请确保启用

$enable-gradients

变量。然后，使用

button-variant

mixin 创建一个类，如下所示：

// Define a custom gradient
$custom-gradient: linear-gradient(75deg, #6b0f1a, #b91372, #f7ff00);

// Use the button-variant mixin for the custom button
.btn-custom {
  @include button-variant(
    $background: $custom-gradient,
    $border: darken(#6b0f1a, 15%),
    $hover-background: linear-gradient(75deg, #f7ff00, #b91372, #6b0f1a),
    $hover-border: darken(#b91372, 15%)
  );
}

您可以使用变量代替十六进制代码。

希望有帮助:)

快乐编码！！