CSS 自定义属性

定义

CSS 自定义属性（Custom Properties），俗称 CSS 变量，是以两个连字符开头声明的属性，例如 --main-color: #333，通过 var(--main-color) 在任意属性值中引用。

特性

• 遵循级联与继承规则，可在任意选择器中声明并被后代覆盖；
• 可在运行时由 JavaScript 通过 setProperty 动态修改，无需重新编译；
• var() 支持回退值，如 var(--gap, 8px)；
• 配合 @property 规则可注册类型与初始值，使变量可参与动画插值。

与预处理器变量的区别

Sass、Less 的变量在编译期被替换为静态值；自定义属性存在于运行时的 CSSOM 中，能响应媒体查询、类切换与脚本修改，二者常配合使用。

应用

典型场景包括暗色模式与多主题切换、设计令牌（Design Token）体系、组件库对外暴露样式接口，以及减少重复取值提升可维护性。它是现代 CSS 工程化的基础设施之一。