用 CSS 变量搭建企业级设计系统

为什么用 CSS 变量

传统 SCSS 变量在编译时确定，无法运行时修改。CSS 变量支持运行时动态修改，天然支持主题切换。

设计 Token 分层

1. 基础层：原始值定义（颜色色板、间距基准）

2. 语义层：语义化命名（primary、secondary、success）

3. 组件层：组件内引用语义变量

实践建议

所有颜色用 CSS 变量，不硬编码

间距用 4px 基准倍数

字号用预设档位

圆角和阴影统一管理

总结

设计系统不是约束创意，而是保证一致性和效率。