less 不支持真正的 map 结构，所谓 map 维护难题是伪命题；所有带冒号的括号语法均为无效，会被解析为字符串或报错；推荐用命名空间变量+when条件mixin或参数化mixin替代。
Less 里根本不存在真正的 map 结构，所谓 “map 不好维护” 是个伪命题——你写的 @colors: (red, green, blue) 或 @theme: ("primary": #007bff, "secondary": #6c757d) 在 Less 4.2.0 中不会被识别为 Map，编译器直接当普通值或语法错误处理。
为什么你写的 map 代码不生效
Less 官方至今未支持键值对语法或 map-get() 函数。所有带括号+冒号的写法（如 ("size": "lg")）属于无效语法，要么报错，要么被当作字符串字面量，无法提取、遍历或条件判断。
-
@config: ("variant": "danger")→ Less 解析为单个字符串值，length(@config)返回1，不是你想的“2 个键值对” -
map-get(@config, "variant")→ 编译失败，错误信息类似undefined function map-get - 社区某些插件或 fork 版本可能提供该能力，但它们不是标准 Less，团队协作时极易出问题
替代方案：用变量命名空间 + when 条件匹配
想实现类似 Map 的配置分发，唯一可靠方式是靠命名约定 + 条件 mixin：
@theme-primary: #007bff;
@theme-secondary: #6c757d;
@theme-success: #28a745;
.theme-color(@name) when (@name = primary) {
color: @theme-primary;
}
.theme-color(@name) when (@name = secondary) {
color: @theme-secondary;
}
.theme-color(@name) when (@name = success) {
color: @theme-success;
}
.btn {
.theme-color(primary);
}
- 不依赖任何非标语法，所有 Less 4.x 环境都兼容
- 调用点明确，调试时能直接跳转到对应分支
- 新增主题色只需加一行变量 + 一个
when分支，无运行时开销
更推荐的做法：改用参数化 Mixin + 默认值兜底
比起模拟 Map，直接把配置作为 mixin 参数传入，语义更清晰、控制更稳：
.button-style(
@variant: primary,
@size: md,
@rounded: false
) {
background-color: if(@variant = primary, @color-primary, @color-secondary);
padding: if(@size = sm, @spacing-xs, if(@size = lg, @spacing-lg, @spacing-md));
border-radius: if(@rounded, @radius-sm, 0);
}
- 参数名即文档，调用时
.button-style("danger", "lg", true)比查 map 键直观得多 - 所有值都来自变量体系，避免硬编码；默认值让调用更宽松
- 编译后 CSS 干净，无冗余规则，也不存在“map 未定义导致样式消失”的静默失败
真正难维护的从来不是“Map”，而是把配置逻辑塞进不可控的字符串结构里。Less 的能力边界很清晰：它只做静态替换。越早接受这点，越少在构建阶段掉坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
