less 3.x 的 map 是编译期查表机制，仅支持字面量静态键、≥3.1.0 版本，不支持变量传键或嵌套访问；批量生成需用 map-keys/map-values 配合 .each()；嵌套主题应使用规则集而非嵌套 map；中后期设计系统宜抽离 json 配置。
Less 3.x 的 map 功能不是设计系统管理的“增强方案”，而是有严格适用边界的编译期查表机制——它只在键名完全静态、版本 ≥3.1.0、且你明确接受无法动态传键/嵌套访问的前提下才可用；其他情况，用变量前缀 + mixin 守卫更稳。
map-get() 只能查字面量键，不能传变量或字符串
你写 @colors: (primary: #007bff, success: #28a745)，map-get(@colors, primary) 能工作，但以下全部失败：
-
map-get(@colors, "primary")→ 引号使键变成字符串，解析报错 -
@key: primary; map-get(@colors, @key)→ 编译期不求值变量，@key不会被替换成primary -
map-get(@colors, light-primary)→ 连字符非法，标识符解析中断
本质是：Less 把 (key: value) 当作不可拆解的 token 序列，不是运行时对象。所谓“查表”，只是编译器按字面匹配。
批量生成原子类必须用 .each() + map-keys/map-values
想自动生成 .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; }
}
嵌套主题必须用规则集，不是嵌套 map
要实现类似 $theme.light.colors.primary 的路径访问，map-get(map-get(@theme, light), primary) 会失败——第二层返回的是规则集或空值，不是可再 map-get 的结构。唯一可行方式是规则集：
- 定义：
@theme: { light: { colors: { primary: #007bff; }; }; };（注意大括号、分号、无逗号） - 取值：
@theme.light.colors.primary→ 编译后直接展开为#007bff - 不能动态拼接：
@layer: light; @theme.@{layer}.colors.primary无效，@{}插值不支持规则集路径
规则集是纯静态展开，没有运行时切换能力，但语义清晰、无歧义。一旦需要 JS 侧读取或响应式切换，就得换工具链（如 Sass 或 PostCSS + JSON）。
真正容易被忽略的是：Less 的所有 map 相关操作都在编译期完成，和 JS 零交互；而设计系统演进到中后期，往往需要配置导出、主题预览、暗色模式开关等能力——这时继续硬塞 map，不如早一步把配置抽成 JSON，交给构建工具处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
