Question

我正在尝试使用自定义生成颜色来主题引导程序 4。

以下方法工作正常：

$primary: #e73a92;
$secondary: #821209;

$theme-colors: () !default;
$theme-colors: map-merge(
    $theme-colors,
    (
        "primary": $primary,
        "secondary": $secondary,
    )
);

但就像我说的，我已经生成了颜色，但我无法使用它们。这是我正在尝试做的

$primary:   var(--clr-red-20);
$secondary: var(--clr-blue-60);

$theme-colors: () !default;
$theme-colors: map-merge(
    $theme-colors,
    (
        "primary": $primary,
        "secondary": $secondary,
    )
);

颜色是用这个循环生成的：

$colors: (

    blue: (
        80: hsl(212, 100%, 80%),
        70: hsl(212, 100%, 70%),
        60: hsl(212, 100%, 60%),
        50: hsl(212, 100%, 50%),
        40: hsl(212, 100%, 40%),
        30: hsl(212, 100%, 30%),
        20: hsl(212, 100%, 20%),
        10: hsl(212, 100%, 10%),
    ),

    red: (
        80: hsl(355, 100%, 80%),
        70: hsl(355, 100%, 70%),
        60: hsl(355, 100%, 60%),
        50: hsl(355, 100%, 50%),
        40: hsl(355, 100%, 40%),
        30: hsl(355, 100%, 30%),
        20: hsl(355, 100%, 20%),
        10: hsl(355, 100%, 10%),
    ),

);

:root {
    @each $color, $shades in $colors {
        @each $shade, $value in $shades {
            --clr-#{$color}-#{$shade}: #{$value};
        }
    }
}

这是错误消息的开头。问题似乎是 bootstrap 不能使用带有 _funtions.scss 混合的变量

Message:
    node_modules/bootstrap/scss/_functions.scss
Error: argument `$color-2` of `mix($color-1, $color-2, $weight: 50%)` must be a color
        on line 96 of node_modules/bootstrap/scss/_functions.scss, in function `mix`
        from line 96 of node_modules/bootstrap/scss/_functions.scss, in function `theme-color-level`
        from line 101 of node_modules/bootstrap/scss/_tables.scss
        from line 17 of node_modules/bootstrap/scss/bootstrap.scss
        from line 20 of custom/_imports.scss
        from line 1 of custom/style.scss
>>   @return mix($color-base, $color, $level * $theme-color-interval);

   ----------^

有没有人设法使这种主题成为可能？

带有自定义颜色变量的主题引导程序

0 个答案: