less无原生map，需用嵌套变量模拟；v4.1.0+支持@theme[@key]语法但键名须字面量；推荐扁平变量或外部json+css变量方案。
Less里没有原生Map类型，得用对象模拟
Less语言本身不支持ES6那样的Map结构，所谓“Maps特性”实际是开发者用@variables嵌套对象（即带命名空间的变量集合）来模拟。主题色提取本质是定义一组键值对，再通过循环或逐个引用展开为CSS规则。
常见错误是直接写map-get()——Less根本没有这个函数，那是Sass的；也有人误用extract()，它只适用于列表，不能查键名。
- 主题色必须定义为嵌套变量，例如：
@theme: { @primary: #007bff; @success: #28a745; }; - 引用时用
@theme[@primary]语法（Less 4.0+ 支持），旧版Less需改用@theme-primary扁平命名规避 - 若用
@theme[@primary]，编译器必须是Less v4.1.0+，v3.x会报错variable is undefined
用each()遍历主题色生成CSS类
Less 4.0引入了each()函数，可配合keys()和values()实现类似Map遍历的效果。这是最接近“提取并输出”的实用路径。
注意each()只接受列表（list），所以得先把嵌套变量转成键值对列表——不能直接传@theme，而要手动构造@theme-keys: primary, success, warning;和对应颜色列表。
- 推荐写法：
@theme-keys: primary, success, warning; @theme-colors: #007bff, #28a745, #ffc107; each(@theme-keys, { @key: e(%("%s", @value)); @color: extract(@theme-colors, index(@theme-keys, @value)); .text-@{key} { color: @color; } .bg-@{key} { background-color: @color; } }); - 上面代码生成
.text-primary、.bg-success等类，但无法自动绑定键名和颜色——因为Less不支持运行时反射，必须人工保持@theme-keys和@theme-colors顺序一致 - 如果主题色超过5个，手维护两个列表极易出错，此时建议放弃纯Less方案，改用构建时脚本生成变量文件
@theme[@key]语法在v4.1.0+中可用但有兼容陷阱
Less v4.1.0起支持@object[@key]访问嵌套变量，看起来像Map取值，但它不是动态的：key必须是字面量，不能是变量或表达式。
比如@theme[@primary]合法，但@theme[@current]（其中@current: primary）会失败，报错Variable @current is undefined——它不会做变量求值。
- 安全用法只有硬编码键名：
.btn-primary { background: @theme[@primary]; } - 想动态切换主题？做不到。Less是编译时处理，没有运行时Map查询能力
- 若项目需多主题切换，应把不同
@theme定义拆成多个less文件（如theme-dark.less），构建时按需导入
真正可靠的主题色管理其实是“别用Less做Map”
Less的变量系统设计初衷是静态配置，强行模拟Map会暴露语法短板：无类型检查、无键存在性判断、无嵌套深度限制。线上项目踩坑最多的是升级Less版本后@theme[@key]突然失效——因为v4.0.0不支持该语法，v4.1.0才加入，且文档极不显眼。
更务实的做法是把主题色定义在JSON里，用PostCSS或Webpack loader注入到CSS变量，或者干脆用CSS自定义属性--primary-color配合JS切换。Less只负责基础样式结构，颜色值由外部注入。
如果你非要在Less里维护主题，就老老实实用扁平变量：@theme-primary: #007bff;，然后写.text-primary { color: @theme-primary; }——简单、稳定、所有Less版本都认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
