使用SASS函数主题-颜色级别在引导4中创建自定义梯度

Question

我已经设置了引导4主题变量，如下所示：

// custom-theme.scss
$primary: green;
$secondary: purple;

然后是自定义变量，如：

// custom-variables.scss
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

$idi-primary-12: theme-color-level(primary, -12);

然后按以下方式导入所有内容：

//main.scss,
@import "./bootstrap-theme";
@import "./custom-variables";
@import '~bootstrap/scss/bootstrap';

这将像btn-primary和text-secondary这样的引导类按预期更新(很好)；

但是基于我的$primary的自定义变量($idi-主-12)不起作用。我使用的是theme-color-level SASS函数，就像在正式文件中给出的那样。

当我在组件中使用这个时，

// myComponent.scss
@import "../custom-variables";

.myUserInfo {
    background-color: $idi-primary-12;
    color: color-yiq($idi-primary-12);
}

我得到了bootstrap/scss/variables.scss).中的蓝色阴影(这是默认的)Github源而不是我的重写(green -如上面所设置的)

问:我如何使用主题-颜色级别的函数，使用我的$primary (绿色)变量来生成更轻版本的绿色？(而不是默认的蓝色)。

附加信息：SASS功能的正式文件

1. theme-color-level使用theme-color
2. theme-color按键从对象$theme-colors中提取(我使用主)
3. $theme-colors 主键被设置为$primary (Github $主题-颜色)
4. $primary设置为blue (用于$primary的Github)
5. 这应该被我的$primary = green;从自定义主题. This中重写。这就是为什么btn-初选是有效的。(以绿色表示)。但是为什么不使用相同的重写变量来创建我的$idi-primary-12变量呢？

Answer 1

引导带中的AFAIK theme-color-level函数将接受两个参数，颜色名称以字符串形式表示(例如，“主”、“info”)和级，如下所示：

// Request a theme color level
@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

如果我们想要使用这个功能的一些颜色，其他的主题颜色(例如。)，也许我们可以为此编写另一个函数，例如：

@function custom-color-level($color: pink, $level: 0) {
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

使用这个自定义函数，我们可以将第一个参数作为颜色传递(例如。#007，橙色)

Answer 2

我想你有一个错误，$primary而不是主要

$idi-primary-12: theme-color-level($primary, -12);

Answer 3

令人惊讶的是，theme-color-level并没有在内部使用重写的$primary值。相反，它采用的是默认的$primary值(蓝色)。

我能够使用其他函数，它直接工作在重写的$primary值上。

// custom.scss
$primary: green;

darken($primary, 10% )
lighten($primary, 10% )

参考文献