是否可以在Twitter-bootstrap 4 $ theme-colors数组中使用CSS变量？

问题描述

在引导程序4中，您可以使用以下数组定义和/或覆盖默认颜色：（）

In bootstrap 4 you can define and/or override default colors using the following array: (as documented here)

$theme-colors: (
    "primary": #001122, /*override*/
    "color-1": red, /*new color*/
    "color-2": black, /*new color*/
    "color-3": white /*new color*/
);

我想为不同用户制作自定义主题颜色。用户可以根据主体的类别选择我定义的不同调色板。

I want to make custom theme colors for different users. Users can choose different color palettes which I have defined based on the class of the body.

我制作了一个新文件来制作自己的样式，在body标签的CSS变量中定义了主题颜色：

I made a new file to make my own styles, defining my theme colors in CSS variables in the body tag:

body {
  &.color-pallette-red {
    --theme-color-1: red;
    --theme-color-2: black;
    --theme-color-3: white;

    color: var(--theme-color-1); /*red*/
  }

  &.color-pallette-yellow {
    --theme-color-1: yellow;
    --theme-color-2: black;
    --theme-color-3: white;

    color: var(--theme-color-1); /*yellow*/
  }
}

但通过这种方式，引导程序颜色当然不会被覆盖...

But in this way, the bootstrap colors are of course not overwritten...

我试图将CSS变量粘贴到前面提到的bootstrap数组中，以确保bootstrap使用了我的颜色：

I tried to paste my CSS variables in the bootstrap array mentioned earlier, to make sure that bootstrap used my colors:

$theme-colors: (
    "color-1": var(--theme-color-1),
    "color-2": var(--theme-color-2),
    "color-3": var(--theme-color-3)
);

但这返回错误：$ color2：var（-theme-color -1）不是颜色。 @return mix（$ color-base，$ color，$ level * $ theme-color-interval）; 运行编译脚本后。因此，引导程序/编译器无法将我的CSS变量识别为颜色...

But this returns Error: $color2: var(--theme-color-1) is not a color. @return mix($color-base, $color, $level * $theme-color-interval); after running the compiling script. So bootstrap/compiler didn't recognize my CSS variables as a color...

我想要的摘要是：根据主体类更改引导程序颜色。有人知道达到此目的的方法吗？

Summarized what I want is: Change bootstrap colors based on body class. Does anyone know a way to achieve this?

推荐答案

您不能在 set CSS变量中直接映射，因为该变量由于SASS是预处理器而不会在那时进行编译，因此引导程序会转过来并将那些主题KVP转换为：root 变量，所以您本质上是两次做同一件事。解决此问题的一种方法是，您可以通过通用的 SASS 方法进入地图本身：

You can't set CSS variables in the maps directly, because that variable would not be compiled at the time as SASS is a preprocessor, additionally bootstrap turns around and converts those theme KVPs into :root variables anyways, so you're essentially doing the same thing twice. One way around this is you can just tap into the map itself via generic SASS methods:

  ...
  property: map-get(map-merge($theme-colors,($key : $color)),$key)
  ...

一旦您设置了特定的KVP，它将在全球范围内可供其他地方使用。

Once you have set that particular KVP, it will then be available globally to use elsewhere.

在这一点上，使用CSS var（）是任意的，但是只是为了覆盖我的所有基础，可以设置主题，然后更改变量，而不是重新设置&调用 theme-color（ color-2）。

At this point, it's arbitrary to use CSS var(), but just to cover all my bases, you can set the theme, and then alter the variable, as opposed to re-setting & calling theme-color("color-2").

完整的示例如下：

@import "bootstrap";

$theme-colors: (
    "primary": #001122,
    "color-1": black, 
    "color-2": black, 
    "color-3": black 
);

@function set-theme-color($key, $color) {
  @return map-get(map-merge($theme-colors,($key : $color)),$key);
}

@mixin theme($color1, $color2, $color3) {
  background-color: set-theme-color("color-1", $color1);

  h1 {
    color: set-theme-color("color-2", $color2);
  }
  h2 {
    color: set-theme-color("color-3", $color3);
  }
}

main {
  &.theme-purple {
    @include theme(purple,cornflowerblue,white);
    /* example demonstrating color3 can change */
    --color-3: orange;
  }

  &.theme-red {
    @include theme(red,black,white);
  }
}

h2 { 
  color: theme-color("color-2"); 
}
h3 {
/* example demonstrating color3 changed */
  color: var(--color-3);
}

<script src="http://codeply.com/js/embed.js"></script><div data-codeply="o9n2ST6HW5" ></div>

注意，该示例还演示了一个主题是否设置了变量而其他主题是否设置了变量没错您选择的主题颜色无效，并且属性恢复为继承。

Note, the example also demonstrates if one theme sets the variable and others don't. The theme color you choose is invalid and the property reverts to inherit.

这篇关于是否可以在Twitter-bootstrap 4 $ theme-colors数组中使用CSS变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！