CSS Variables

在输入区按「变量名: 值」的格式逐行粘贴，例如 `primary: #1E90FF` 或 `radius-sm: 4px`。工具会自动解析并生成 CSS 自定义属性（`--primary: #1E90FF`）和可选的 Token 映射表。如果变量有层级（如颜色/间距分类），可以在变量名前加前缀如 `color-primary`，输出时会保留分组。不支持带花括号的完整 CSS 规则块，只处理纯键值对。

CSS 自定义属性名对连字符（-）和下划线（_）都合法，工具会原样保留，不会自动转换。但如果变量名以数字开头（如 `1st-color`），CSS 自定义属性会报错，因为 CSS 变量名必须以 `--` 开头后跟标识符，标识符不能以数字开头。工具遇到这类非法输入会标红提示，不会自动修正。检查变量名首字符是否为数字或特殊符号即可。

Figma 导出的 JSON（如 design-tokens 格式）或 Sketch 的样式数据，本工具不直接解析 JSON 或嵌套结构。需要先将 Token 中的键值对提取为纯文本格式，比如 `color/primary: #1E90FF`，然后粘贴到输入区。工具只处理平铺的键值对，不支持嵌套对象或数组。如果 Token 有层级（如 `color.primary.base`），建议手动扁平化为 `color-primary-base: #1E90FF` 再输入。

工具只处理输入区中明确给出的变量定义，不会解析或替换其他 CSS 代码中的 `var()` 引用。如果你输入了 `primary: #1E90FF`，输出的是 `--primary: #1E90FF`，但不会自动生成 `background: var(--primary)` 这样的使用语句。若需要生成使用语句，需手动在输入区额外添加 `bg: var(--primary)` 之类的引用行，工具会将其视为新变量输出。

变量值中的空格会被保留，但行内注释（如 `primary: #1E90FF /* 主色 */`）会因解析规则被丢弃。工具按 `变量名: 值` 的格式逐行解析，`: ` 后的所有内容（直到行尾）均视为值，包括空格和特殊字符。如果值本身包含冒号（如时间值 `10:30`），需要确保变量名后只有一个冒号，否则工具可能错误截断。建议将复杂值用引号包裹或单独测试。

工具支持同时输出 CSS 变量、JSON Token 映射和 SCSS 变量三种格式。CSS 输出中变量名前会加 `--` 前缀；JSON 输出中键名保持原样，值是对应的 CSS 变量引用（如 `"primary": "var(--primary)"`）；SCSS 输出中变量名前加 `$` 前缀。三种格式的原始值（颜色、尺寸等）均来自输入，不会相互转换。如果输入的是色值 `#1E90FF`，三种格式都会保留该色值，只是变量名语法不同。

支持直接粘贴多行文本，每行一条变量定义。可以从设计工具的导出列表、CSV 文件或代码编辑器中复制多行内容一次性粘贴。工具会自动按换行符分割并解析。注意：如果从 Excel 或表格软件复制，单元格之间的制表符（Tab）不会被识别为分隔符，需要先替换为冒号或手动整理成 `变量名: 值` 格式。建议粘贴前检查是否有空行或多余分隔符。

本工具完全在浏览器本地运行（FE 实现），不依赖后端。Safari 和微信内置浏览器对 CSS 变量解析本身无兼容问题，但如果浏览器版本过低（如 Safari < 10）或禁用 JavaScript，工具可能无法加载。如果出现界面错乱或按钮无反应，检查是否开启了内容拦截插件，或尝试更新浏览器。报错通常与工具本身无关，更多是浏览器环境限制。