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

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

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

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

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

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

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

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');

由于支持，不要使用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.