less 4.0+ 支持用 @themes map + each() 批量生成多主题 css 变量，需顶层声明、启用 javascriptenabled，并通过 .theme-rules mixin 遍历输出 :root[data-theme="x"] 下的 --theme-* 变量，禁止运行时嵌套取值。
直接用 @themes Map + each() 生成多套 CSS 变量
Less 4.0+ 原生支持 Map 结构，@themes 是批量生成主题最干净的方式——它不依赖文件复制、不靠 import 顺序覆盖，而是把所有主题色定义在一个对象里，再用 each() 遍历输出 :root[data-theme="xxx"] 下的 --* 变量。
常见错误是把 @themes 当成 JS 对象直接用在样式声明里，比如 color: @themes[light][primary];——Less 不允许这种运行时取值，必须配合 each() 转成 CSS 规则。
-
@themes必须顶层声明，不能嵌套在 mixin 或选择器内 - 每个主题键名要合法（如
light、dark、ocean），避免空格或特殊字符 -
each(@themes, @theme, @name)中的@name是主题名（light），@theme是其子对象（{ primary: #1890ff, ... }） - 生成的 CSS 变量名建议统一前缀，比如
--theme-primary，避免和项目其他变量冲突
示例片段：
@themes: {
light: { primary: #1890ff; text: #333; bg: #fff; },
dark: { primary: #722ed1; text: #fff; bg: #1f1f1f; },
ocean: { primary: #13c2c2; text: #262626; bg: #f8fbfb; }
};
each(@themes, .theme-rules);
.theme-rules(@theme, @name) {
:root[data-theme="@{name}"] {
--theme-primary: @theme[primary];
--theme-text: @theme[text];
--theme-bg: @theme[bg];
}
}
lessc --js 编译时必须启用 JavaScript 支持
如果你的主题变量用了 Less 内置函数（比如 lighten(@primary, 10%)、spin(@primary, 30)），或者复用了 antd 的 antd.less（v4），那默认 lessc 会报错：JavaScript evaluation not supported。这不是配置漏了，是编译器默认禁用 JS 执行。
容易被忽略的是：Node.js API 调用时也要显式传参，不是加个 --js 命令行就万事大吉。
- 命令行编译：必须写
lessc --js themes.less themes.css，少--js就失败 - Node.js 调用
less.render()：options里得有{ javascriptEnabled: true } - Vite / Webpack 用户：less-loader 的
lessOptions同样需要javascriptEnabled: true，否则modifyVars覆盖后函数算不出来 - v5 的
antd.variable.less不依赖 JS 函数，但若你手动加了mix()或contrast()，仍需开启
别在 Less 里写 color-mix()，它根本不会被编译
搜“Less color-mix”常掉进坑里：color-mix(in srgb, var(--a), var(--b)) 是纯 CSS 运行时语法，Less 编译器不认识，直接报错 Operation on an invalid type。Less 能做的只有生成静态色值或导出变量供 CSS 使用。
真正可行的分工是：Less 算基础色，CSS 做混合。
- Less 文件里只写
@primary: #1890ff;，然后--primary: @primary; - CSS 里用
--primary-hover: color-mix(in srgb, var(--primary) 80%, #fff 20%); - Safari 目前只认
in srgb，in lch会静默失效，权重必须写全（不能省略20%） - 需要兼容旧浏览器？在
color-mix()前加一行硬编码 fallback：color: #1064b0;
变量集中管理失败，八成是 @import 位置或作用域错了
很多人说“我写了 @color-primary，但在 button.less 里用不了”，检查后发现 variables.less 确实 @import 了——问题往往出在位置或嵌套上。
Less 没有全局变量池，变量作用域严格绑定导入顺序和声明位置。
-
@import必须放在每个.less文件最顶部，不能在选择器、mixin 或注释之后 - 不能在
.btn { @size: 14px; }这种块级作用域里声明主题变量，它对外不可见 - Vue 单文件组件中
@import无效？那是 scoped style 独立编译，得用style-resources-loader或 Vite 的vite-plugin-style-import注入 - Webpack less-loader 中
modifyVars失效？先确认variables.less是否被主入口@import过，没引入就覆盖不了
批量生成主题时，最稳的结构是：一个 themes.less（含 @themes 和 each()），一个 variables.less（只声明基础语义变量，如 @primary），所有组件文件顶部先 @import "variables.less"，再 @import "themes.less"——顺序不能反。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
