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

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

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

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

你可以对选择器进行分组:

#selector1, #selector2, #selector3 { color: black; }

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

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

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

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

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是不可能实现的。

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

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

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

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

如果将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;
}