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

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

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

当前回答

我不清楚为什么不能使用PHP。然后，您可以根据需要简单地添加和使用变量，将文件保存为PHP文件，并链接到. PHP文件作为样式表，而不是.css文件。

它不一定是PHP，但你明白我的意思。

当我们需要编程的东西时，为什么不使用编程语言，直到CSS(可能)支持变量之类的东西?

还有，看看Nicole Sullivan的面向对象的CSS。

其他回答

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

http://lesscss.org/

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中有一个很好的例子。

你可以试试CSS3变量:

body {
  --fontColor: red;
  color: var(--fontColor);
}

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

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

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

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

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

推荐文章