CSS 变量指南

按行输入 名称=值,工具会自动补全 -- 前缀,生成一段可粘贴的 :root 自定义属性(CSS 变量)声明块,并用 var() 示范调用方式。适合快速搭建主题色与设计令牌。全部在浏览器本地完成。

变量定义 等待输入

每行一个 name=value,名称可不带 --;值为空则忽略该行。

计算结果
变量数—
字符数—
输入变量定义后点击生成,声明块将显示在这里。

生成的自定义属性可直接粘贴使用;结果仅供参考。

计算说明
  • 自定义属性以 -- 开头,通常声明在 :root 上。
  • 通过 var(--name) 引用变量,可提供回退值。
  • 自定义属性区分大小写,且可被继承。
  • 名称若不含 -- 前缀,工具会自动补全。
  • 变量适合集中管理颜色、间距、圆角等设计令牌。