less映射需用{}定义键值对，键名不加引号，取值用@map[key]；必须在全局作用域声明，不可嵌套；挂载css变量需显式写入:root并配合var()使用，:export仅导出js对象，不影响css变量。
Less映射怎么定义和取值
Less的@colors这类映射不是语法糖，而是编译期可遍历的键值结构，必须用花括号{}包裹，键名不加引号，值支持颜色、数字、单位等合法CSS值。取值时用方括号@colors[primary]，不能写成@colors.primary——后者会被lessc直接忽略或报错。
常见错误是把映射当普通变量用：@colors: #1890ff; 这根本不是映射，只是个字符串变量；或者写成@colors: { "primary": #1890ff };，带引号的键名在Less里无法被@colors[primary]访问。
- 映射必须定义在全局作用域（即不在任何选择器内），否则嵌套层级会干扰查找
- 键名支持中文、短横线，但推荐用驼峰或下划线，避免
@theme["dark-mode"]这种非标准写法 - 映射本身不能直接用于
:export导出为JS对象，需手动展开
如何把映射里的值批量挂到:root上
映射不会自动变成CSS自定义属性，你得显式循环输出。Less没有for语句，但可以用.each()混合宏配合:root规则块。最简方式是手写一组--color-primary声明：
:root {
--color-primary: @colors[primary];
--color-success: @colors[success];
--color-warning: @colors[warning];
--color-danger: @colors[danger];
}
别漏掉:root——只写--color-primary: @colors[primary];不会生效，CSS变量必须挂载到根伪类或具体元素上。
- 如果映射字段多（比如20+色值），建议用
.each()mixin生成，避免手写遗漏 - 注意单位一致性：映射里存
14px，挂到:root就直接是--font-size-base: 14px，别加引号 - Vite项目中，这段
:root代码必须放在被additionalData注入的全局文件里，否则组件内var(--color-primary)查不到
:export和CSS变量是两回事，别混用
:export块只对JS模块导出有效，它把Less变量转成JS对象，例如{ primaryColor: "#1890ff" }，但对浏览器里的CSS变量毫无影响。你在theme.less里写了:export { primaryColor: @colors[primary]; }，同时又没写:root { --color-primary: @colors[primary]; }，那页面里var(--color-primary)永远是unset。
-
:export适合让JS读取主题配置做逻辑判断（比如深色模式开关），但样式层必须靠CSS变量驱动 - Webpack项目里
:export由less-loader处理，Vite默认不支持，得配postcss-plugin-variables或改用import theme from "@/styles/theme.less"的JS模块方式 - 映射字段名和CSS变量名不必强一致，但建议保持语义对齐，比如
@colors[primary]→--color-primary，别写成--main-color增加维护成本
为什么不能直接用映射替代CSS变量做主题切换
Less映射在编译期就被展开成静态值，@colors[primary]最终输出就是#1890ff。一旦CSS生成完毕，再通过JS改document.documentElement.style.setProperty("--color-primary", "#ff6b6b")，对@colors[primary]完全无效——它早就没了。
真正需要的是双轨机制：开发期用映射组织Less变量，运行期靠CSS变量响应变化。比如按钮背景色写background-color: var(--color-primary);，而不是background-color: @colors[primary];。
- 映射适合做设计系统文档、色板生成、暗色模式预计算（如
lighten(@colors[primary], 10%)） - 但所有最终渲染的样式属性，只要可能动态切换，就必须走
var(--xxx) - 容易被忽略的一点：CSS变量有继承性，
:root设了--color-primary，子元素直接color: var(--color-primary)就行，不用每层都重定义
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
