通过CSS变量可统一管理颜色，提升维护性。在:root中定义--primary-color等变量，使用var()函数调用，支持全局与局部作用域及JavaScript动态修改，适用于主题切换与大型项目。
在CSS中，可以通过自定义属性（也叫CSS变量）来定义颜色，方便在整个样式表中复用和维护。CSS变量以两个连字符（--）开头，可以在选择器内定义，并通过 var() 函数调用。
1. 定义CSS颜色变量
通常将变量定义在 :root 选择器中，这样变量可以全局使用：
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--success-color: #28a745;
}
2. 使用颜色变量
在其他样式规则中，使用 var(--变量名) 来引用定义好的颜色：
.header {
background-color: var(--primary-color);
color: var(--success-color);
}
.button {
background-color: var(--secondary-color);
}
3. 变量的局部作用域
CSS变量可以定义在任意选择器内，作用范围为其自身及其后代元素。例如：
立即学习“前端免费学习笔记（深入）”；
.card {
--card-bg: #f8f9fa;
background-color: var(--card-bg);
}
此时 --card-bg 只在 .card 元素及其子元素中有效。
4. 动态修改变量（可选）
你也可以通过JavaScript动态改变变量值：
document.documentElement.style.setProperty('--primary-color', '#ff6347');
这会实时更新所有使用该变量的颜色。
基本上就这些。使用CSS变量能让颜色管理更清晰，尤其在主题切换或大型项目中非常实用。不复杂但容易忽略细节是作用域和命名规范。建议统一命名风格，比如全部小写加短横线分隔。
