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

Question

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

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

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

@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 的这一部分吗？

提前致谢。