Less 本身没有原生 Map 数据结构,所谓“Maps 功能”是通过命名空间嵌套变量或 mixin 条件分支模拟的;直接使用 map-get 会报错,新版支持 .namespace[@key] 语法访问,旧版需用 when 分支匹配键名。

Less 本身没有原生的 Map 数据结构(不像 Sass 的 map 或 JS 的 Map),所谓“Maps 功能”其实是开发者用嵌套变量 + 命名约定模拟出来的模式。直接当真去用 map-get 这类函数会报错——Less 不认识它。
Less 里根本不存在 map-get 或 map-keys
如果你在 Less 中写了 map-get($colors, primary),编译会直接失败,报错类似:undefined function map-get。Less 的函数系统不支持运行时键值查找,所有“map-like”行为都得靠变量命名 + 字符串拼接 + extract 或自定义 mixin 实现。
- Less 变量是扁平的、静态的,
@colors-primary: #007bff和@colors-secondary: #6c757d是两个独立变量,不是同一个对象下的属性 - 无法动态拼接变量名再求值(比如
@{prefix}-@{key}在旧版 Less 中不支持变量插值求值,仅限于选择器或属性名) - 新版 Less(4.0+)支持
extract()函数,但只能用于 list,不能用于“模拟 map”的字符串键值对
用命名空间 + 嵌套变量模拟 Map 结构(推荐做法)
Less 支持 .namespace { @var: value; } 语法,这是最接近“map”的组织方式,且能避免全局污染、支持作用域隔离。
例如定义状态颜色:
立即学习“前端免费学习笔记(深入)”;
.colors {
@primary: #007bff;
@success: #28a745;
@warning: #ffc107;
@danger: #dc3545;
}
.btn {
background-color: .colors[@primary];
}
注意:.colors[@primary] 是 Less 4.0+ 引入的“命名空间访问语法”,等价于 .colors[@primary] → #007bff。它不是函数调用,而是语法糖,只在命名空间内有效。
- 必须用
.开头声明命名空间(如.colors),不能用@colors - 访问时必须用方括号
[@key],不能用圆括号或点号链式写法 - 键名必须是已定义的变量(如
@primary),不能是字符串字面量["primary"] - 不支持动态 key:你不能写
.colors[@theme]然后让@theme等于@primary再间接取值——Less 不做变量展开嵌套求值
用 mixin 封装“map 查询”逻辑(兼容旧版 Less)
如果项目还在用 Less 3.x,或者需要更灵活的 key 匹配(比如传字符串参数),就得靠 mixin 模拟:
.color-map(@key) when (@key = primary) { @ret: #007bff; }
.color-map(@key) when (@key = success) { @ret: #28a745; }
.color-map(@key) when (@key = warning) { @ret: #ffc107; }
.btn {
.color-map(primary);
color: @ret;
}
这种写法本质是条件分支,靠 when 匹配参数,把结果赋给 @ret。虽然啰嗦,但兼容性好、逻辑清晰。
- 每个
.color-map分支必须显式定义,无法遍历或自动注册新 key - 返回值靠共享变量
@ret传递,要注意作用域——@ret必须在调用 mixin 的同一作用域中声明或可访问 - 不能嵌套调用:比如
.color-map(@mode)中@mode是变量,Less 不会在when中展开它做匹配,只会字面比较
真正容易被忽略的是:Less 的“map”从来不是数据结构,而是组织习惯。别试图把它当成 JS 对象来迭代或合并,重点是用命名空间约束变量范围、用 mixin 封装重复逻辑。一旦开始写 for 或 each 风格的循环,说明你该换预处理器了。


















