less 的 map 功能仅适用于键名固定、批量生成原子类且版本 ≥3.1.0 的场景；map-get() 不支持字符串键、变量键或连字符键；.each() 遍历需先拆解 keys/values；嵌套主题必须用规则集而非嵌套 map；所有 less 结构均在编译期处理，无法与 js 交互。
Less 的 map 功能不是“更优雅”的替代方案，而是特定约束下的有限工具——它只在键名固定、批量生成原子类、且你已确认 Less 版本 ≥ 3.1.0 时才值得用；其他情况，普通变量更稳、更直白。
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/values，且版本不能低于 3.1.0
想批量生成 .text-primary、.bg-success 类？别直接 .each(@colors) { ... }——这会报 Cannot call method 'each' on null。正确做法是：
- 先用
map-keys(@colors)和map-values(@colors)拆成两个 list - 再用
.each(@color-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无效，@{}插值不支持规则集路径
规则集是静态编译期展开，没有运行时切换能力，但语义清晰、嵌套可靠。
所有 map 和规则集都无法与 JavaScript 交互
这是最容易被忽略的一点：无论你用 map-get() 还是 @theme.light.colors.primary，它们都在编译阶段完成，输出纯 CSS。浏览器里 JS 拿不到这些结构，也不能根据用户偏好动态改主题变量。真要运行时换肤，得靠 CSS 自定义属性（--primary-color）+ JS 控制 data-theme 属性，而不是依赖 Less 的 map。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
