CSS 变量生成器
从设计 Token 生成 CSS 自定义属性。可视化管理颜色、字体排版、间距和圆角，实时生成 :root 代码块。免费，基于浏览器。
使用方法
- 设置变量前缀（默认
—，可改为—brand-等）。 - 编辑各分组中预填的 Token，或点击+ 添加 Token新增。
- 颜色 Token 可使用颜色选择器，也可直接输入十六进制值。
- 生成的 CSS 代码块实时更新。
- 点击复制将
:root { … }代码块复制到剪贴板。
什么是设计 Token？
设计 Token 是设计决策的唯一真实来源——颜色调色板、字号比例、间距节奏和圆角大小。
将它们存储为 :root 块中的 CSS 自定义属性，可使整个样式表都能访问这些值。
修改一个 Token，所有使用它的组件都会同步更新。
Token 分组说明
- 颜色 — 品牌调色板、背景色、文字颜色及状态色，带颜色选择器。
- 字体排版 — 字体族栈及基础/比例字号。
- 间距 — 统一的间距比例（4px、8px、16px 等）。
- 圆角 — 从微妙到胶囊形状的圆角半径值。
FAQ
什么是 CSS 自定义属性（CSS 变量）？
CSS 自定义属性（又称 CSS 变量）是以双连字符为前缀的实体（如 --primary-color: #3b82f6），定义在 :root 块内。可在样式表任意位置通过 var(--primary-color) 复用，让全局设计修改变得快速一致。
变量前缀是什么，如何修改？
前缀是附加在每个变量名前面的字符串，默认为 '--'，生成标准 CSS 自定义属性语法。可以改为 '--brand-' 或 '--theme-' 等，用于命名空间隔离，避免变量名冲突。
如何添加新的设计 Token？
点击任意分组（颜色、字体排版、间距、圆角）内的「+ 添加 Token」按钮，填写变量名和值。颜色 Token 还提供颜色选择器，CSS 输出实时更新。
如何删除不需要的 Token？
点击 Token 行末尾的 × 按钮即可删除，CSS 输出立即更新。
如何在项目中使用生成的 CSS？
点击「复制」按钮复制 :root 代码块，粘贴到全局样式文件（如 styles/global.css）中，在组件 CSS 中通过 var(--token-name) 引用任意 Token。