Question

我设置了Bootstrap 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-primary-12）不起作用。我正在使用official documentation中给出的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 source而不是我的替代（绿色-如上所述）

问题：如何使用主题颜色级别的函数来使用$ primary（绿色）变量生成该绿色的浅色版本？（而不是默认的蓝色）。

其他信息： official documentation for SASS functions

theme-color-level使用theme-color
theme-color通过键从对象$theme-colors中提取（我正在使用 primary ）
$theme-colors 主键设置为$primary（Github for $theme-colors）
$primary设置为蓝色（Github for $primary）
我的$primary = green;应该已经从 custom-theme.scss 中覆盖了此内容。这就是btn-primary工作的原因。（显示为绿色）。但是为什么不使用相同的重写变量来创建我的$idi-primary-12变量呢？

Answer 1

我认为您输入错了，$ primary而不是Primary

n = EV3.inWaiting()

Answer 2

令人惊讶的是，

theme-color-level 在内部没有使用覆盖的$ primary值。而是采用默认的$ primary值（蓝色）。

我能够使用其他功能，该功能直接作用于覆盖的 $ primary 值。

// custom.scss
$primary: green;

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

Reference

Answer 3

Bootstrap中的

AFAIK 主题颜色级别功能将从字符串中的主题（例如'primary'，'info'）中获取两个参数， color-name 和级别，如下所示：

mpltx = (Tkx * 7300/690) - 3650 

mplty = (Tky * 10600/560) - 5300

，如果我们想将此功能用于主题颜色以外的其他颜色（例如“原色”），也许我们可以为此编写另一个功能，例如：

// 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);
}

使用此自定义功能，我们可以将第一个参数传递为颜色（例如，＃007bff，橙色）

使用SASS函数theme-color-level

3 个答案: