使用 SASS 函数主题颜色级别在引导程序 4 中创建自定义渐变

Posted 2023-03-21

【中文标题】使用 SASS 函数主题颜色级别在引导程序 4 中创建自定义渐变

【英文标题】：Create custom gradient in bootstrap 4 using SASS function theme-color-level

【发布时间】：2019-09-20 12:56:28

【问题描述】：

我已设置 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 AS EXPECTED (nice);

但是基于我的 $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);

我得到 BLUE 阴影（这是 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 键设置为 $primary (Github for $theme-colors) $primary 设置为 蓝色 (Github for $primary) 这应该被我来自 custom-theme.scss 的$primary = green; 覆盖。这就是 btn-primary 工作的原因。 （显示为绿色）。但为什么不使用相同的覆盖变量来创建我的 $idi-primary-12 变量？

【参考方案1】：

AFAIK theme-color-level Bootstrap 中的函数将采用 2 个参数，color-name 来自字符串中的主题（例如，'primary'、'info'）和level的数量如下图：

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

如果我们想将此函数用于除主题颜色之外的某些颜色（例如'primary'），也许我们可以为此编写另一个函数，例如：

@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);

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

【参考方案2】：

我认为你有一个错字，$primary 而不是 primary

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

【讨论】：

其实 theme-color-level 需要一个主题键，“primary”，“success”.. $primary 持有一个颜色值。 :\

【参考方案3】：

theme-color-level 令人惊讶地没有在内部使用被覆盖的 $primary 值。相反，它采用默认的 $primary 值（蓝色）。

我能够使用其他函数，它直接作用于我覆盖的 $primary 值。

// custom.scss
$primary: green;

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

Reference