CSS通过自定义属性定义颜色变量，如:root{--primary-color:#007bff;}，使用var()函数调用，支持继承与覆盖，可结合JavaScript动态修改，提升样式维护性。
在CSS中，可以通过自定义属性（通常称为“CSS变量”）来定义颜色，并使用 var() 函数调用它们。这种方式让颜色管理更灵活、便于维护。
定义CSS颜色变量
CSS变量以两个连字符（--）开头，可以在任意选择器中定义，但通常放在 :root 伪类中，以便全局使用。
示例：:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--success-color: #28a745;
}
使用var()调用颜色变量
通过 var(--变量名) 的方式引用已定义的变量，可以用于颜色、背景、边框等任何支持颜色值的属性。
示例：.btn-primary {
background-color: var(--primary-color);
color: white;
border: 1px solid var(--primary-color);
}
.card-header {
background-color: var(--secondary-color);
color: white;
}
变量的继承与覆盖
CSS变量遵循CSS的层叠和继承机制。你可以在某个特定选择器中重新定义变量，从而实现局部覆盖。
立即学习“前端免费学习笔记（深入）”；
.theme-dark {
--primary-color: #0d6efd;
--text-color: #f8f9fa;
}
body {
color: var(--text-color, #212529); / 第二个参数是默认值 /
}
上面例子中，如果未定义 --text-color，则使用默认值 #212529。
动态修改变量（结合JavaScript）
你可以用JavaScript动态改变CSS变量，实现主题切换等功能。
示例：document.documentElement.style.setProperty('--primary-color', '#dc3545');
这会把全局的 --primary-color 修改为红色，所有使用该变量的元素将自动更新样式。
基本上就这些。使用CSS颜色变量能大幅提升样式的可维护性，尤其是在大型项目或多主题场景中非常实用。不复杂但容易忽略的是变量命名规范和作用域控制，建议保持语义化命名，如 --color-primary、--bg-dark 等。
