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 类名、字体声明三者严格一致。


















