我正在处理一个相当长的CSS文件。我知道客户可能会要求更改配色方案,并想知道:是否可以将颜色分配给变量,这样我就可以更改一个变量,使新颜色应用于所有使用它的元素?
请注意,我不能使用PHP动态更改CSS文件。
我正在处理一个相当长的CSS文件。我知道客户可能会要求更改配色方案,并想知道:是否可以将颜色分配给变量,这样我就可以更改一个变量,使新颜色应用于所有使用它的元素?
请注意,我不能使用PHP动态更改CSS文件。
当前回答
CSS的“少”Ruby宝石看起来棒极了。
http://lesscss.org/
其他回答
人们一直在为我的答案投票,但与“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是不可能实现的。
你可以使用JavaScript,也可以使用LESS .js,这将把LESS变量实时呈现到CSS中,但它仅用于开发,并且为实际使用增加了太多的开销。
你可以使用CSS最接近的是使用属性子字符串选择器,像这样:
[id*="colvar-"] {
color: #f0c69b;
}
并设置您想要调整为以colvar-开头的名称的所有元素的id,例如colvar-header。然后,当您更改颜色时,所有ID样式都会更新。这是你单独使用CSS所能达到的效果。
编辑:这个答案不再是最新的。你现在应该使用CSS变量。
考虑使用SCSS。它与CSS语法完全兼容,因此有效的CSS文件也是有效的SCSS文件。这使得迁移很容易,只需要更改后缀。它有许多增强,最有用的是变量和嵌套选择器。
在将其发送到客户端之前,需要通过预处理器将其转换为CSS。
多年来,我一直是一名铁杆CSS开发人员,但自从强迫自己用SCSS做项目以来,我现在不会使用其他任何东西。
恐怕不是PHP,而是Zope和Plone使用类似于SASS的DTML来实现这一点。它在CMS中非常有用。
Upfront Systems在Plone中有一个很好的例子。
是的,在不久的将来(我在2012年6月写了这篇文章)你可以定义原生css变量,而不需要使用更少的/sass等!Webkit引擎刚刚实现了第一个css变量规则,所以Chrome和Safari的前沿版本已经可以使用它们了。查看官方Webkit (Chrome/Safari)开发日志和现场css浏览器演示。
希望在接下来的几个月里,我们可以看到浏览器对原生css变量的广泛支持。