如何在CSS中将颜色定义为变量?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (15)

我正在处理一个很长的CSS文件。我知道客户端可以要求对配色方案进行更改,并想知道:是否可以将颜色分配给变量,这样我就可以更改一个变量,以便将新颜色应用于所有使用它的元素?

请注意,我不能使用PHP动态更改CSS文件。

提问于
用户回答回答于

可以在CSS中的每个颜色之前添加注释,以便充当某种变量,可以更改使用find/替换的值,因

在css文件的顶部

/********************* Colour reference chart****************
*************************** comment ********* colour ******** 

box background colour       bbg              #567890
box border colour           bb               #abcdef
box text colour             bt               #123456

*/

稍后在css文件中

.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}

然后,例如,更改对进行查找/替换的框文本的配色方案。

/*bt*/#123456
用户回答回答于

示例CSS文件

:root {
    --main-color:#06c;
}

#foo {
    color: var(--main-color);
}

在JavaScript/客户端操作CSS变量

document.body.style.setProperty('--main-color',"#6c0")

在所有现代浏览器中都有支持。

Firefox 31+, Chrome 49+, Safari 9.1+, Microsoft Edge 15+, Opera 36+ 附带对CSS变量的本机支持。

扫码关注云+社区