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

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


当前回答

由于支持,不要使用css3变量。

如果你想要一个纯css解决方案,我会做以下事情。

Use color classes with semenatic names. .bg-primary { background: #880000; } .bg-secondary { background: #008800; } .bg-accent { background: #F5F5F5; } Separate the structure from the skin (OOCSS) /* Instead of */ h1 { font-size: 2rem; line-height: 1.5rem; color: #8000; } /* use this */ h1 { font-size: 2rem; line-height: 1.5rem; } .bg-primary { background: #880000; } /* This will allow you to reuse colors in your design */ Put these inside a separate css file to change as needed.

其他回答

人们一直在为我的答案投票,但与“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

恐怕不是PHP,而是Zope和Plone使用类似于SASS的DTML来实现这一点。它在CMS中非常有用。

Upfront Systems在Plone中有一个很好的例子。

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

http://lesscss.org/

如果将css文件编写为xsl模板,则可以从简单的xml文件中读取颜色值。然后使用xslt处理器创建css。

colors.xml:

<?xml version="1.0"?>
<colors>
    <background>#ccc</background>
</colors>

styles.xsl:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="text" version="1.0" encoding="iso-8859-1"/>
    <xsl:template match="/">body {
    background-color: <xsl:value-of select="/colors/background" />;
}
</xsl:template>
</xsl:stylesheet>

渲染css样式的命令:xsltproc -o styles.css styles。xsl colors.xml

styles: css

body {
    background-color: #ccc;
}

当然可以,在某种程度上,感谢多个类的奇妙世界,可以做到这一点:

.red {color:red}
.blackBack {background-color: black}

但我经常把它们组合在一起,就像这样:

.highlight {color:red, background-color: black}

我知道语义警察会盯着你,但这很管用。