如何将引导程序原色更改为线性渐变？

Question

我正在尝试将引导程序原色更改为linear-gredient渐变，但出现错误：

$theme-colors: (
  "primary": linear-gradient(to right, #373b44, #4286f4)
);

错误：

 $link-hover-color: darken($link-color, 15%) !default; ^ Argument `$color` of `darken($color, $amount)` must be a color

Answer 1

问题是linear-gradient用于background-image ，而不是 foreground color 。 当 SASS 编译器尝试构建 Bootstrap 时，它不能在背景图像上使用 darken(..) 函数。

相反，您可以更改具有这样背景的元素的primary颜色......

.bg-primary,
.btn-primary,
.badge-primary,
.alert-primary {
    background-image: linear-gradient(to right, #373b44, #4286f4);
}

https://www.codeply.com/go/XXUxFr6tEZ

Answer 2

你想达到什么目的？ 渐变背景？ $primary-color主要用于设置color样式规则，而不是背景。 它还用于根据它计算其他颜色，例如$link-color 。 在您的情况下，sass 解析器试图使链接在悬停时看起来更暗，试图将变暗函数应用于线性渐变。 如果您正在尝试制作线性渐变背景 - 您需要设置处理背景图像的变量。 对于渐变文本，您需要阅读有关background-clip

渐变文字

Answer 3

脚步：

• 设置$enable-gradients: true
• 用您的渐变作为背景覆盖.bg-gradient-primary类
• 将.bg-gradient-primary类添加到您的元素

例子：

<button class="btn bg-gradient-primary border-0">Connect Wallet</button>