less 无原生 map 类型，需用命名空间模拟键值对，如 @theme: { primary: #007bff; }; 并通过 @theme[primary] 访问，支持嵌套但不支持 each() 直接遍历，且要求 less v3.5+ 兼容。
Less 中没有原生 Map 类型，但可以用对象模拟
Less 本身不支持 JavaScript 那样的 Map 或哈希结构，但它允许用「嵌套命名空间」或「带命名空间的变量」来模拟键值对集合。这种写法在社区中被广泛称为“pseudo-map”或“namespace map”，本质是利用 Less 的作用域和变量继承机制。
常见错误是直接写 @colors: { primary: #007bff; secondary: #6c757d; };——这会报错，因为 Less 不解析花括号内的键值语法。
正确做法是定义一个命名空间：
@theme: {
primary: #007bff;
secondary: #6c757d;
success: #28a745;
};
这个 @theme 不是变量，而是一个命名空间（类似 JS 中的对象字面量），后续可通过 @theme[primary] 提取值（Less 1.4+ 支持）。
提取值要用方括号语法 @namespace[key]
Less 提供了 [] 括号访问语法，用于从命名空间中动态取值。它不是数组索引，而是命名空间属性访问器。
以下写法有效：
.btn-primary {
background-color: @theme[primary];
}
.btn-secondary {
border-color: @theme[secondary];
}
注意：@theme[primary] 必须确保 primary 是命名空间中已声明的 key，否则编译失败（不会静默 fallback）。
可提取的类型包括颜色、数字、字符串、甚至其他变量（只要已定义）：
-
@spacing: { xs: 4px; sm: 8px; lg: 24px; };→margin: @spacing[sm]; -
@breakpoints: { mobile: 480px; tablet: 768px; };→@media (min-width: @breakpoints[tablet]) { ... }
避免在循环中误用 —— each() 不支持命名空间遍历
Less 的 each() 函数只接受 list（逗号分隔列表）或 space-separated 值，不能直接遍历命名空间。试图写 each(@theme, ...) 会报错 Operation on an invalid type。
如果真需要批量生成规则，得先把 key 列出来：
@keys: primary, secondary, success;
each(@keys, {
.bg-@{value} {
background-color: @theme[@{value}];
}
});
这里 @{value} 是插值，@theme[@{value}] 才能动态取值。漏掉插值符号 @{} 就会变成字面量 @theme[value]，找不到 key 导致编译失败。
性能上无明显影响，但过度嵌套命名空间会让调试变难——比如 @theme[colors][dark][border] 这种三层结构，Less 支持，但可读性和维护性下降明显。
兼容性与构建工具限制
方括号语法 @ns[key] 在 Less v3.5.0+ 完全稳定，但旧版（如 v2.x）不支持。如果你用的是 Webpack + less-loader，请确认 Less 版本：
npm list less
若输出是 less@2.7.3，必须升级；v3.0+ 才安全。另外，某些 IDE（如老版 VS Code Less 插件）可能无法识别该语法，提示“unknown variable”，属于静态检查误报，不影响编译。
真正容易被忽略的是：命名空间内不能使用未定义变量。例如：
@theme: {
base: #333;
hover: lighten(@base, 10%); // ❌ 报错：variable @base is undefined in this scope
};
因为命名空间内部不自动继承父级变量。解决方式是提前定义，或改用函数封装逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
