如何在CSS中定义颜色作为变量?

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

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

当前回答

CSS通过CSS变量支持这一点。

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变量支持。

其他回答

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

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

编辑:这个答案不再是最新的。你现在应该使用CSS变量。

考虑使用SCSS。它与CSS语法完全兼容，因此有效的CSS文件也是有效的SCSS文件。这使得迁移很容易，只需要更改后缀。它有许多增强，最有用的是变量和嵌套选择器。

在将其发送到客户端之前，需要通过预处理器将其转换为CSS。

多年来，我一直是一名铁杆CSS开发人员，但自从强迫自己用SCSS做项目以来，我现在不会使用其他任何东西。

仅靠CSS是不可能实现的。

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

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

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

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

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

http://lesscss.org/

你可以通过javascript传递CSS，用特定的颜色替换所有的color1实例(基本上是regex它)，并提供一个备份样式表，以防最终用户关闭JS

推荐文章