CSS 如何将颜色定义为变量?

在CSS中，将颜色定义为变量可以使用CSS自定义属性，也常被称为CSS变量。这样做可以让你在多处重用同一颜色值，而且如果需要更改颜色，你只需要在一个地方更新定义即可。

下面是如何定义和使用CSS颜色变量的步骤：

1. 首先，在你的CSS文件的:root伪类中定义颜色变量。:root通常用于全局变量，因为它代表了文档树的根元素，即HTML元素。

css
:root {
  --primary-color: #3498db;
  --accent-color: #e74c3c;
  --background-color: #ecf0f1;
}

1. 一旦定义了变量，你就可以在CSS文件的其他部分使用var()函数来引用这些变量。

css
header {
  background-color: var(--primary-color);
}

button.accent {
  background-color: var(--accent-color);
}

body {
  background-color: var(--background-color);
}

在这个例子中，我们定义了三个颜色变量：主色调、强调色和背景色。然后我们在不同的CSS选择器中使用了这些变量，比如header、button类.accent和body。

这种方法的好处是，如果未来我们决定更改主题颜色，我们只需要在:root中更新变量值，CSS中使用这些变量的地方都会自动使用新的颜色值，使得维护和更新变得非常方便。

CSS 通过CSS Variables原生支持这一点。

CSS 文件示例

shell
:root {
    --main-color:#06c;
}

#foo {
    color: var(--main-color);
}

有关工作示例，请参阅此 JSFiddle（该示例显示小提琴中的 CSS 选择器之一将颜色硬编码为蓝色，另一个 CSS 选择器使用 CSS 变量（原始语法和当前语法）将颜色设置为蓝色） 。

在 JavaScript/客户端操作 CSS 变量

shell
document.body.style.setProperty('--main-color',"#6c0")

所有现代浏览器都支持

Firefox 31+、Chrome 49+、Safari 9.1+、Microsoft Edge 15+和Opera 36+附带对 CSS 变量的本机支持。

人们不断对我的答案进行投票，但与sass或less的乐趣相比，这是一个糟糕的解决方案，特别是考虑到如今易于使用的 gui 的数量。如果您有任何理智，请忽略我下面建议的所有内容。

您可以在CSS中的每种颜色之前添加注释，以充当一种变量，您可以使用查找/替换来更改它的值，所以...

在css文件的顶部

shell
/********************* Colour reference chart****************
*************************** comment ********* colour ******** 

box background colour       bbg              #567890
box border colour           bb               #abcdef
box text colour             bt               #123456

*/

稍后在 CSS 文件中

shell
.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}

然后，例如，更改您执行查找/替换的框文本的颜色方案

shell
/*bt*/#123456

Yeeeaaahhh ....您现在可以在****CSS中使用var( ) 函数.. ...

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

但如何声明它们...

这很简单：

例如，你想将 a 分配#ff0000给 a var()，只需将其分配在 中即可:root，还要注意--：

shell
:root {
    --red: #ff0000; 
}

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

好处是浏览器支持还不错，也不需要编译就可以在浏览器中使用，比如LESS或SASS...

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

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

CSS 本身不使用变量。但是，您可以使用另一种语言（例如SASS）来使用变量定义样式，并自动生成 CSS 文件，然后将其发布到网络上。请注意，每次更改 CSS 时都必须重新运行生成器，但这并不难。

您可以尝试CSS3 变量：

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