使用CSS var()函数可集中管理颜色变量，提升样式可维护性。通过:root定义--color-primary等语义化变量，在样式中用var(--variable-name)引用，支持fallback备用值增强健壮性，结合类名切换实现主题动态变更，便于团队协作与后期扩展。
CSS 的 var() 函数是管理颜色等样式变量的强大工具，能提升代码的可维护性和一致性。通过定义统一的颜色变量，你可以在整个项目中快速调整主题色，而无需逐个修改样式规则。
定义颜色变量
使用 :root 伪类来定义全局可用的颜色变量，这样所有子元素都能访问这些值。
--color-primary: #007bff;
--color-secondary: #6c757d;
--color-success: #28a745;
--color-danger: #dc3545;
--color-background: #ffffff;
--color-text: #212529;
}
变量名以两个连字符（--）开头，命名建议语义化，便于理解用途。
在样式中使用颜色变量
通过 var(--variable-name) 在任意 CSS 属性中引用已定义的颜色。
立即学习“前端免费学习笔记（深入）”；
.header {background-color: var(--color-primary);
color: var(--color-background);
}
.button {
border: 1px solid var(--color-primary);
color: var(--color-text);
}
.button:hover {
background-color: var(--color-primary);
color: white;
}
这种写法让颜色变更变得集中高效，比如更换品牌色时只需修改变量值。
支持 fallback 值增强健壮性
var() 支持第二个参数作为备用值，当变量未定义或无效时启用。
color: var(--color-warning, #ffc107);
}
这能防止因变量缺失导致样式异常，特别适合组件库或多人协作项目。
动态切换主题的小技巧
结合类名切换，可以实现深色/浅色主题。例如：
:root {--color-background: #ffffff;
--color-text: #212529;
}
.theme-dark {
--color-background: #1a1a1a;
--color-text: #f8f9fa;
}
给 或 添加 theme-dark 类即可整体变色，所有使用变量的地方自动更新。
基本上就这些。合理使用 var() 管理颜色，能让 CSS 更清晰、易维护，也方便后期扩展主题系统。不复杂但容易忽略细节，比如命名规范和 fallback 的使用。
