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

Question

我正在处理一个很长的CSS文件。我知道客户可以要求更改配色方案，并且想知道：是否可以将颜色分配给变量，以便我可以更改变量以将新颜色应用于使用该颜色的所有元素？请注意，我不能使用PHP动态更改CSS文件。

Answer 1

CSS本身通过CSS Variables支持此功能。

示例CSS文件

:root {

    --main-color:#06c;

}

#foo {

    color: var(--main-color);

}

有关工作示例，请参见此JSFiddle（该示例显示了提琴中的一个CSS选择器的颜色已硬编码为蓝色，另一个CSS选择器使用原始和当前语法的CSS变量将颜色设置为蓝色） 。

在JavaScript /客户端中处理CSS变量

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

所有现代浏览器均支持

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

Answer 2

人们不断upvoting我的答案，但相比的喜悦这是一个可怕的解决方案SASS或更少，特别是考虑到方便的使用数量GUI的两种这些天。如果您有任何想法，请忽略以下所有建议。

您可以在每种颜色之前的css中添加注释，以用作一种变量，您可以更改使用查找/替换的值，因此...

在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