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

Question

在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变量识别为颜色......

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

Answer 1

您无法直接在地图中设置 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)
  ...

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

编码演示

Answer 2

为什么不能在 SASS 中为颜色使用 CSS 变量

您不能将 CSS 变量用于颜色的原因是像darken()和lighten()在 SASS中的函数。你可以想像，计算机将不知道什么时候得到的指令做什么：darken( var(--color), 20%); 您无法修改您不知道的值。

如果我们不使用改变颜色的函数怎么办？

事实上，这应该确实有效。bootstrap 库有使用这些函数的 scss 文件。您可以浏览所有引导程序代码并删除修改颜色的函数。当然，这会有点工作。将来更新引导程序会导致您网站的样式神秘地崩溃，并且有人会生您的气。所以这个选项不是一个好主意。

但是......但是......如果CSS可以做到，那么你可以用SASS吗？

是的！这就是答案。这将是相当多的工作。如果您使用另一个变量设置颜色，则可以使用像--color这些颜色一样的 SASS 变量。例如：

  $color1: var(--color-1);

  /* It may seem completely redundant to  
     to define CSS variable here. But 
     it isn't. You can change the variables in 
     your browser now with JavaScript, which 
     may affect multiple elements.
  */
  :root{
    --color-1: purple;
  }
  /* An example on how to change the page
     styling with an id.        
  */
  :root#dark-mode{
    --color-1: black;
  }

  .alert-success{
    background-color: $color1;
  }
  .alert-danger{
    background-color: $color1;
  }

幸运的是，bootstrap 4 开发人员在保持选择器简单方面做得非常好，所以覆盖它不会太难。请记住在引导 css 之后加载您的 CSS。您可能需要在 bootstrap scss 文件中搜索要覆盖的 SASS 变量，以确保涵盖所有情况。

祝你好运！