less 不支持原生 maps 语法，所谓映射只能通过变量命名约定加 mixin 模拟，且 key 必须是编译期已知字面量；动态查询、遍历或运行时拼接 key 均不可行，推荐改用 sass 或 postcss 等更合适工具。
Less 本身不支持原生 Maps 语法
Less 没有类似 Sass 的 map-get 或 JavaScript 的 Map 对象，所谓“Maps 语法”在 Less 中并不存在。你看到的类似写法（比如 @colors: (primary: #007bff, success: #28a745);）是无效的，会直接报错：ParseError: Unexpected token '('。
Less 的数据结构能力非常有限：只支持变量、嵌套规则、混合（mixins）、函数（如 lighten()）和守卫（guards），没有键值对集合类型。所谓“映射集”，实际只能靠变量命名约定 + mixin 模拟实现。
用变量前缀 + mixin 模拟 key-value 映射
常见做法是定义一组带统一前缀的变量，再用 mixin 封装读取逻辑。例如：
@color-primary: #007bff;
@color-success: #28a745;
@color-warning: #ffc107;
.get-color(@key) when (@key = primary) { color: @color-primary; }
.get-color(@key) when (@key = success) { color: @color-success; }
.get-color(@key) when (@key = warning) { color: @color-warning; }
.get-color(@key) when (default()) { color: #000; } // fallback
调用时：.get-color(primary) → 输出 color: #007bff;。这种方式本质是模式匹配，不是动态查表，所以 key 必须是已知字面量，不能是变量传入的字符串。
- 不支持运行时拼接 key 名（如
@k: "primary"; .get-color(@k)会失败） - 每个 key 需手动写一条
when分支，维护成本随规模上升 - 无法遍历所有 key，也不能获取 key 列表
真正需要动态映射？换工具或预处理
如果你的场景要求动态 key 查询、循环生成 CSS、或从 JSON 配置注入样式，Less 已经超出能力边界。这时应考虑：
- 改用 Sass：它原生支持
$map: (primary: #007bff, ...)和map-get($map, primary) - 用 PostCSS 插件（如
postcss-map）加载 JSON 文件，在构建时注入 CSS 变量 - 在 JS 层控制：把颜色配置存在 JS 对象里，通过
:root设置 CSS 自定义属性，CSS 中用var(--color-primary)
强行在 Less 里“模拟 Map”只会让代码越来越难调试——比如某个 key 拼错，Less 不报错也不警告，只是走 default 分支，结果样式静默失效。
Less 中最接近“映射”的安全实践
如果必须坚持用 Less，推荐这个轻量可控的方案：
// 定义主映射表（仅作为文档和维护依据）
// @color-map: primary #007bff, success #28a745, warning #ffc107;
// 每个值单独声明，保证 IDE 跳转和 lint 支持
@color-primary: #007bff;
@color-success: #28a745;
@color-warning: #ffc107;
// 统一 mixin 提供语义化调用
.color-bg(@type) {
background-color: ~"@@{color-@{type}}";
}
注意：~"@@{color-@{type}}" 是字符串插值，它依赖 Less 的变量解析机制，@type 必须是编译期已知的字面量（如 primary），且变量名必须严格匹配前缀规则。一旦 @type 是拼接结果或来自外部参数，就会解析失败。
这种写法看似绕，但它把“映射逻辑”显式收口在变量命名和 mixin 内部，比试图复刻 Map 更易排查、更少隐性依赖。复杂样式系统里，可维护性往往比语法糖重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
