如何在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              #567890box border colour           bb               #abcdefbox text colour             bt               #123456*/稍后在CSS文件中.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}然后，例如，更改您在其上查找/替换的框文本的配色方案/*bt*/#123456