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。


















