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

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


当前回答

人们一直在为我的答案投票,但与“sass”或“less”的乐趣相比,这是一个糟糕的解决方案,特别是考虑到现在这两种方法都有很多易于使用的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

其他回答

没有简单的CSS解决方案。你可以这样做:

在CSS文件中找到background-color和color的所有实例,并为每个独特的颜色创建一个类名。 .top-header {color: #fff;} .content-text {color: #f00;} .bg-leftnav {background-color: #fff;} .bg-column {background-color: #f00;} 接下来,浏览网站上涉及到颜色的每个页面,并为颜色和背景色添加适当的类。 最后,删除CSS中除了新创建的颜色类之外的任何颜色引用。

CSS的“少”Ruby宝石看起来棒极了。

http://lesscss.org/

你可以对选择器进行分组:

#selector1, #selector2, #selector3 { color: black; }

仅靠CSS是不可能实现的。

你可以使用JavaScript,也可以使用LESS .js,这将把LESS变量实时呈现到CSS中,但它仅用于开发,并且为实际使用增加了太多的开销。

你可以使用CSS最接近的是使用属性子字符串选择器,像这样:

[id*="colvar-"] {
    color: #f0c69b;
}

并设置您想要调整为以colvar-开头的名称的所有元素的id,例如colvar-header。然后,当您更改颜色时,所有ID样式都会更新。这是你单独使用CSS所能达到的效果。

人们一直在为我的答案投票,但与“sass”或“less”的乐趣相比,这是一个糟糕的解决方案,特别是考虑到现在这两种方法都有很多易于使用的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