CSS 变量生成器
从可编辑列表生成 CSS 自定义属性（变量）。添加颜色、间距和字体变量，自动检测颜色值——输出可直接复制的干净 :root 块。全部在浏览器中运行，无需上传。
关于 CSS 变量生成器
这个 CSS 变量生成器完全在你的浏览器中运行。添加带名称和值的变量行，工具会生成包含 CSS 自定义属性的干净 :root 块。颜色值会被自动检测，在文本输入旁显示颜色选择器。使用预设按钮可以快速加载常见的颜色或间距令牌。整个过程不上传任何数据——所有处理由 JavaScript 在本地完成。
使用方法
- 点击+ 添加变量创建新行，或使用预设按钮加载起始集合。
- 输入变量名（无需
--前缀——会自动添加）和值。 - 如果值是颜色（hex、rgb、hsl），会自动出现颜色选择器方便选择。
- 点击生成 CSS生成
:root块，然后点击复制 CSS复制。 - 使用每行的删除图标移除单个变量。
什么是 CSS 自定义属性？
CSS 自定义属性（也称 CSS 变量）允许你在样式表中定义可重用的值。它们在 :root 选择器中声明，并用 var() 函数引用。这使得在整个项目中维护一致的设计令牌（颜色、间距、字体）变得容易，并能以最少的代码变更实现主题切换等功能。
常见问题
名称中需要包含 -- 前缀吗？ 不需要，工具会自动添加。只需输入变量名（如 primary-color）。
支持哪些值格式？ 任何有效的 CSS 值：颜色（#hex、rgb()、hsl()）、长度（16px、1rem）、字符串、数字等。颜色值会获得颜色选择器以便捷选择。
我的数据会上传吗？ 不会。所有操作都在浏览器本地完成。