CSS 变量

CSS Custom Properties

样式与 CSS也叫：CSS 自定义属性、CSS Variables、var()

一句话：在 CSS 里给一个值起名字、存起来反复使用，改一处就能全局生效，常用来管理颜色、间距和主题。

详细解释

CSS 变量用两个短横线开头来定义，用 var() 读取。比如在 :root 里写 --color-primary: #2563eb，其他地方写 color: var(--color-primary)。以后要换主色，只改定义的那一行，所有用到它的地方都会跟着变。

它和 Sass 里的 $变量 不同：CSS 变量在浏览器运行时生效，可以被覆盖和动态修改。比如在 [data-theme="dark"] 下重新定义同名变量，页面就换成深色；在某个组件内部重新定义，只影响这个组件；也能用 JavaScript 实时修改。

它和 设计令牌 的关系：设计令牌是设计层面的规范（主色是什么、间距有哪几档），CSS 变量是把这些规范落到网页代码里最常见的方式。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

请把写死的颜色、圆角和间距提取成 CSS 变量，定义在 :root 中，如 --color-primary、--radius-md；组件里一律用 var() 引用；深色模式在 [data-theme="dark"] 下重新定义颜色变量。