Yeeeaaahhh……你现在可以在CSS.....中使用var()函数

好消息是你可以使用JavaScript访问来改变它，这也会在全局范围内改变…

但是如何申报呢?

这很简单:

例如，你想要将#ff0000赋值给var()，只需简单地将它赋值在:root中，还要注意——:

:root {
    --red: #ff0000; 
}

html, body {
    background-color: var(--red); 
}

好的方面是浏览器支持不差，也不需要像LESS或SASS那样编译才能在浏览器中使用…

另外，这是一个简单的JavaScript脚本，它将红色值更改为蓝色:

const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');

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

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

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

还有，看看Nicole Sullivan的面向对象的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变量支持。

Yeeeaaahhh……你现在可以在CSS.....中使用var()函数

好消息是你可以使用JavaScript访问来改变它，这也会在全局范围内改变…

但是如何申报呢?

这很简单:

例如，你想要将#ff0000赋值给var()，只需简单地将它赋值在:root中，还要注意——:

:root {
    --red: #ff0000; 
}

html, body {
    background-color: var(--red); 
}

好的方面是浏览器支持不差，也不需要像LESS或SASS那样编译才能在浏览器中使用…

另外，这是一个简单的JavaScript脚本，它将红色值更改为蓝色:

const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');

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;
}