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

Question

在 bootstrap 4 中，您可以使用以下数组定义和/或覆盖默认颜色:( as documented here )

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

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

我创建了一个新文件来制作我自己的样式，在 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*/
  }
}

但这样一来，bootstrap的颜色当然不会被覆盖...

我试图将我的 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/编译器没有将我的 CSS 变量识别为颜色...

总结一下我想要的是:根据体型更改 Bootstrap 颜色。有谁知道实现这一目标的方法吗？

Answer 1

您不能直接在 map 中设置 CSS 变量，因为该变量当时不会被编译，因为 SASS 是预处理器，另外 Bootstrap 转过来并将这些主题 KVP 转换为 :root 变量，所以你实际上是在做同样的事情两次。解决此问题的一种方法是您可以通过通用 SASS 方法直接访问 map 本身:

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

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

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

codeply demo