Less不支持直接导入JSON，必须用脚本将Figma Token转为@color-primary-500: #4F46E5;等合法Less语法并存为variables.less；共存CSS变量需用~"var(--x, @{y})"桥接，且:root声明须独立生成。
Less 本身不支持直接读取设计稿导出的 JSON/YAML Token，所谓“映射不统一”，本质是人工或脚本在 token 数据和 Less 变量之间做了一次性转换，但后续缺乏同步机制和语义校验。
为什么 @import "tokens.json" 会报错
Less 编译器只解析 .less 文件，遇到 @import "tokens.json" 会直接抛出 File not found 或 ParseError: Unrecognised input。它不执行 JS、不解析 JSON，也不理解 Figma Tokens 的结构——所有 token 必须提前转成合法 Less 语法，例如：@color-primary-500: #4F46E5;、@spacing-md: 16px;。
如何让 Figma Token 自动变成可用的 Less 变量文件
靠手动复制粘贴必然脱节。推荐用 Node.js 脚本把 Figma API 返回的变量数据，生成标准 variables.less：
- 用
axios请求https://api.figma.com/v1/files/{FILE_KEY}/variables/local获取原始变量 - 按前缀（如
Colors/Primary→color-primary）归类并转为小写连字符命名 - 确保单位显式：间距输出
@spacing-xs: 4px;，而非@spacing-xs: 4; - 最终写入
src/styles/tokens/variables.less，内容全是@xxx: ...;声明，不含 JS 或 JSON 片段
别跳过 !default：主文件里统一加 !default，比如 @color-primary-500: #4F46E5 !default;，方便后续主题覆盖。
Less 变量和 CSS 自定义属性（var(--x)）怎么共存
设计系统常要求同时输出 Less 变量（供编译时计算）和 CSS 变量（供 runtime 主题切换），二者不能混用：
-
var(--color-primary-500)在 Less 里必须写成~"var(--color-primary-500)"，否则会被当作非法标识符静默丢弃 - 不要试图用
@{color-primary-500}插值进var()，~"var(--@{name})"是无效语法 - CSS 变量应在
:root中定义，且需独立于 Less 变量文件管理；建议用另一份脚本从同一份 token 数据生成:root { --color-primary-500: #4F46E5; } - Less 中引用 CSS 变量仅用于 fallback 场景，例如：
color: ~"var(--color-primary-500, @{color-primary-500})";
调试时发现 Less 编译后颜色/间距对不上设计稿怎么办
这不是编译问题，而是 token 同步断点没卡准。最常见原因有三个：
- 脚本导出的
variables.less没更新，但 Figma 里已改了Primary/500值——运行导出脚本，确认文件修改时间最新 - Less 文件里写了
@import "../tokens/variables.less";，但路径实际是../../tokens/variables.less，导致 import 失败，整个变量块静默丢失（编译结果为空或 fallback 到默认值） - 用了
!default却在别处重复声明同名变量，比如themes/dark.less和components/button.less都写了@color-primary-500: ...;，只有第一个生效，后者被忽略
行号错位、变量莫名为空、CSS 里出现未定义的 @xxx 字符串——这些都不是样式写错了，而是 token 到 Less 的映射链在某个环节断开了，得顺着 import 路径和变量声明顺序一环环查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
