使用 CSS 变量在 :root 中定义颜色并复用，支持回退值、媒体查询重定义和 JS 动态修改，是简洁、可维护且无需编译的最佳实践。
直接用 CSS 变量（Custom Properties）定义颜色，然后在各处复用，是最简洁、可维护性最强的方式。
定义 CSS 变量
在 :root 伪类中声明变量，确保全局可访问：
:root {
--primary-color: #4a90e2;
--error-color: #e74c3c;
--text-light: #f8f9fa;
}
在样式中使用变量
用 var(--变量名) 引入，支持回退值（当变量未定义时的备用颜色）：
立即学习“前端免费学习笔记（深入）”；
-
按钮背景：
background-color: var(--primary-color); -
文字颜色：
color: var(--text-light, #333); -
边框：
border-color: var(--error-color, red);
按需覆盖或局部重定义
变量可被子元素或媒体查询重新赋值，实现主题切换或响应式适配：
- 深色模式下重设：
@media (prefers-color-scheme: dark) { :root { --text-light: #212529; } } - 某个组件内临时改色：
.card { --primary-color: #2c3e50; }
配合预处理器更灵活？其实没必要
CSS 变量原生支持动态修改（JS 可读写）、级联作用域、无需编译，比 Sass/Less 的 $color 更适合现代项目。除非需要复杂函数运算，否则纯 CSS 变量完全够用。
