可以在Twitter-bootstrap 4$主题颜色数组中使用CSS变量吗？
在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*/
}
}但是通过这种方式，引导程序的颜色当然不会被覆盖...
我尝试将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变量识别为颜色...
总而言之，我想要的是:根据body类更改引导程序的颜色。有谁知道实现这一点的方法吗？
回答 3
Stack Overflow用户
发布于 2019-02-19 11:07:50
您不能直接在映射中设置CSS变量，因为SASS是一个预处理器，所以该变量在当时不会被编译，此外，bootstrap还会将这些主题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);
}
<script src="http://codeply.com/js/embed.js"></script><div data-codeply="o9n2ST6HW5" ></div>
注意，这个例子还演示了如果一个主题设置了变量，而其他主题没有设置。你选择的主题颜色是无效的，属性会恢复为继承。
Stack Overflow用户
发布于 2019-02-22 09:38:48
在SASS中为什么不能对颜色使用CSS变量？
不能使用CSS变量表示颜色的原因是像SASS中的darken()和lighten()这样的函数。您可以想象，当计算机收到以下指令时，它将不知道该做什么：darken( var(--color), 20%)；您不能修改您不知道的值。
如果我们只是不使用改变颜色的函数呢？
事实上，这实际上应该是可行的。bootstrap库包含使用这些函数的scss文件。您可以遍历所有的引导程序代码，并删除修改颜色的函数。当然，这将是一项艰巨的工作。将来更新bootstrap会导致你网站的样式莫名其妙地崩溃，有人会对你非常生气。所以这个选项不是一个好主意。
But...But...如果CSS可以做到这一点，你可以使用SASS?。
是!这就是答案。这将是相当多的工作。如果使用其他变量设置颜色，则可以对这些颜色使用SASS变量，如--color。例如：
$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开发人员在保持选择器简单方面做得很好，所以改写它不会太难。记住在bootstrap css之后加载CSS。您可能希望在bootstrap scss文件中搜索要覆盖的SASS变量，以确保覆盖所有情况。
祝你好运！
Stack Overflow用户
发布于 2019-02-21 00:52:25
我喜欢我的另一个答案，但我也想提供另一个解决方案，如果一个不适合项目范围的需要。另一种选择，我认为更直接地满足您的需求，是您可以只级联您的样式表。假设项目树类似于以下内容：
`css\
`--main.css
`--themes.css <- compiled themes.sass
`--themes.sass
`index.htmlWhere index.html
...
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/themes.css">
</head>
<body>
<main class="theme-purple">
<h1>Hello World</h1>
<h2>SASS is fun!</h2>
</main>
<main class="theme-red">
<h1>Hello World</h1>
<h2>SASS is fun!</h2>
</main>
</body>
...Where main.css
.theme-red {
--theme-color-1: red;
--theme-color-2: black;
--theme-color-3: white;
}
.theme-purple {
--theme-color-1: purple;
--theme-color-2: cornflowerblue;
--theme-color-3: white;
}Where themes.sass
@import "node_modules/bootstrap/scss/bootstrap";
$theme-colors: (
"primary": #001122,
"color-1": var(--theme-color-1),
"color-2": var(--theme-color-2),
"color-3": var(--theme-color-3)
);
main {
background-color: theme-color("color-1");
}
h1 {
color: theme-color("color-2");
}
h2 {
color: theme-color("color-3")
}这样您的CSS变量就有机会被编译。我在node.js服务器上进行了测试，因此您应该根据需要更改import语句
https://stackoverflow.com/questions/54632923
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号