CSS变量是通过--定义并在var()中调用的自定义属性，用于提升样式可维护性。在:root中声明后可全局复用，如--primary-color: #007bff;，配合var(--primary-color)使用。支持JavaScript动态修改，实现主题切换与响应式设计，便于团队协作与统一设计token，减少重复代码和人为错误，适合中大型项目。
CSS变量（又称自定义属性）是一种强大的工具，能显著提升样式表的可维护性和一致性。通过在 :root 中定义全局变量，你可以集中管理颜色、字体、间距等常用样式值，实现一处修改、全局生效的效果。
什么是CSS变量？
CSS变量以两个连字符开头（如 --primary-color），可以在整个文档中被复用。它们是响应式的，支持JavaScript动态操作，非常适合构建可维护的大型项目。
变量必须通过 var() 函数调用才能使用。例如：
--main-bg: #007bff;background-color: var(--main-bg);
使用 :root 定义全局变量
:root 是CSS伪类，匹配文档根元素（通常是 ）。在这里定义变量，意味着它们在整个页面都可访问。
立即学习“前端免费学习笔记（深入）”；
示例：
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-size-base: 16px;
--border-radius: 8px;
--spacing-unit: 1rem;
}
之后在任意选择器中使用这些变量：
.btn {
background-color: var(--primary-color);
font-size: var(--font-size-base);
padding: var(--spacing-unit);
border-radius: var(--border-radius);
}
提升维护性的实际好处
当项目规模变大时，重复的值容易导致不一致和难以修改。使用CSS变量后，只需更改一个值，所有引用它的地方自动更新。
- 主题切换更简单：通过JS修改 :root 变量即可实现暗黑/明亮模式
- 团队协作更高效：统一的设计 token 让前端与设计保持一致
- 减少错误：避免复制粘贴导致的颜色或尺寸偏差
结合JavaScript动态控制
CSS变量可以通过JavaScript读取和修改，这为交互式界面提供了便利。
例如切换主题：
document.documentElement.style.setProperty('--primary-color', '#ff6b35');
也可以根据用户偏好设置动态加载变量：
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.style.setProperty('--bg-color', '#1a1a1a');
}
基本上就这些。合理使用CSS变量，能让样式代码更清晰、易改、易扩展。尤其适合需要统一视觉风格的中大型项目。不复杂但容易忽略细节，比如变量命名要语义化，避免过度抽象。
