通过:root定义全局颜色变量可集中管理样式，如--primary-color: #007bff；利用var()函数调用变量，实现主题统一与动态切换，提升维护效率和团队协作一致性。
在CSS中使用全局颜色变量，可以通过 :root 伪类定义自定义属性（也称为CSS变量），实现颜色值的集中管理与复用。这种方式让样式维护更高效，尤其适用于主题色统一或需要动态切换的主题场景。
使用 :root 定义全局颜色变量
:root 代表文档的根元素（在HTML中即 <html>），在这里定义的变量可在整个页面中访问。
语法格式如下：
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--success-color: #28a745;
}
变量名以两个连字符（--）开头，命名遵循驼峰或短横线分隔均可，建议保持统一风格。
立即学习“前端免费学习笔记（深入）”；
在样式中使用自定义颜色变量
通过 var() 函数调用已定义的变量：
.header {
background-color: var(--primary-color);
color: white;
}
<p>.button-success {
background-color: var(--success-color);
border: 1px solid darken(var(--success-color), 10%); /<em> 注意：CSS原生不支持darken，需配合预处理器或JS </em>/
}</p>若变量未定义，var() 可设置默认值：
.text {
color: var(--text-color, #333); /* 如果 --text-color 不存在，使用 #333 */
}
优势与实际应用场景
使用全局颜色变量能显著提升项目可维护性：
- 修改主题色时只需更改变量值，无需逐个替换颜色代码
- 便于实现夜间模式等主题切换功能，结合JavaScript动态更新变量
- 增强团队协作中的样式一致性
例如通过JavaScript切换主题：
document.documentElement.style.setProperty('--primary-color', '#ff6b35');
基本上就这些。使用 :root 定义颜色变量是现代CSS开发中的实用技巧，结构清晰且兼容主流浏览器。不复杂但容易忽略细节，比如变量大小写敏感和作用域理解。掌握后能有效简化样式管理。
