less 中无真正 map，仅支持编译期静态查表；map-get() 仅接受字面量键名，不支持变量、字符串或连字符；遍历需先用 map-keys/values 拆解再 .each；嵌套主题必须用规则集；外部 json 需转为 .less 文件；多环境主题依赖 @import 顺序与 !default。
Less 里没有真正意义上的 Map，所谓“映射管理”只是编译期静态查表，只在键名固定、批量生成原子类、且 Less 版本 ≥3.1.0 时才勉强可用；其他场景下，普通变量更稳、更直白。
map-get() 只能查顶层静态键，不支持变量或字符串传入
你写 @colors: (primary: #007bff, success: #28a745)，那 map-get(@colors, primary) 能工作，但以下全部失败：
-
map-get(@colors, "primary")→ 引号会让解析器报ParseError: Unexpected token '"' -
@key: primary; map-get(@colors, @key)→ 编译期不求值变量，@key不会被替换成primary -
map-get(@colors, light-primary)→ 连字符不是合法标识符，直接中断解析
本质是：Less 把 (key: value) 当作不可拆解的 token 序列，不是运行时对象。
.each() 遍历必须先拆 keys/values，且版本不能低于 3.1.0
想批量生成 .text-primary、.bg-success？别直接 .each(@colors) { } —— 这会报 Cannot call method 'each' on null。正确做法是：
- 先用
map-keys(@colors)和map-values(@colors)拆成两个 list - 再用
.each(@keys) { }，配合index()和extract()对齐键值 - 确认
lessc --version输出至少为3.1.0；3.0.x 有.each()bug，升级再动手
示例片段：
@colors: (primary: #007bff, success: #28a745);
@keys: map-keys(@colors);
@vals: map-values(@colors);
.each(@keys) {
@i: index(@keys, @value);
@key: extract(@keys, @i);
@val: extract(@vals, @i);
.text-@{key} { color: @val; }
}
嵌套主题必须用规则集（ruleset），不是嵌套 map
要实现类似 $theme.light.colors.primary 的访问，map-get(map-get(@theme, light), colors) 会失败——第二层返回的是规则集或空值，不是可再 map-get 的结构。唯一可行路径是规则集：
- 定义：
@theme: { light: { colors: { primary: #007bff; }; }; };（注意大括号、分号、无逗号） - 取值：
@theme.light.colors.primary→ 编译后直接展开为#007bff -
@layer: light; @theme.@{layer}.colors.primary无效，@{}插值不支持规则集路径
规则集是静态编译期展开，没有运行时切换能力，但语义清晰、嵌套安全。
外部 JSON 映射必须转为 .less 文件，不能直接 import
Less 编译器不解析 JSON/JS/YAML。@import "theme.json" 会直接报 File not found 或 ParseError。所有设计规范必须手动或脚本生成为合法 Less 语法：
- 输出目标必须是
variables.less，内容如@spacing-xxs: 2px; - 若用 Figma Tokens 等工具导出，需配置导出格式为 Less，而非原始 JSON
- 多环境主题靠
@import顺序 +!default控制：覆盖文件必须在主文件@import之前引入
真正难的不是写多少变量，而是确保构建流程中 JSON → Less 的转换稳定、可追溯，且变量命名与 CSS 类名、字体声明三者严格一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
