是否有可能在Twitter-bootstrap4$theme-colors数组中使用CSS变量？

在bootstrap 4中,您可以使用以下数组定义和/或覆盖默认颜色:( 如此处所述)

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

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

我创建了一个新文件来创建自己的样式,在body标签中的CSS变量中定义我的主题颜色:

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*/
  }
}

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

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

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

但是这Error: $color2: var(--theme-color-1) is not a color. @return mix($color-base, $color, $level * $theme-color-interval);在运行编译脚本后返回.所以bootstrap/compiler没有将我的CSS变量识别为颜色......

总结我想要的是:根据身体类改变自举颜色.有谁知道实现这一目标的方法？

您无法直接在地图中设置 CSS变量，因为该变量由于SASS是预处理器而不会在那时进行编译，另外，引导程序会转身并将那些主题KVP转换为:root变量，因此您实际上是在做同样的事情两次。解决此问题的一种方法是，您可以通过通用SASS方法直接进入地图本身：

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

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

在这一点上，使用CSS是任意的var()，但是为了覆盖我的所有基础，您可以设置主题，然后更改变量，而不是重新设置和调用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);
}

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