less不支持运行时主题切换，必须通过css自定义属性桥接；variables.less须纯声明带@前缀变量，@import需置顶且顺序决定覆盖；多主题推荐用@themes map+each()生成:data-theme样式。
Less 本身不支持运行时主题切换，所谓“统一管理”只发生在编译期——变量值一旦写入 CSS 就固定了。真要换主题，必须靠 CSS 自定义属性（--primary-color）做中间层，Less 只负责把设计系统里的默认值安全导出过去。
variables.less 必须是纯变量声明文件
它不是样式入口，也不该含任何选择器或 @import 嵌套。只做三件事：声明带 @ 前缀的变量、加注释、结尾加分号。
-
@color-brand-primary: #1890ff;✅ 正确：语义命名 +@前缀 + 分号 -
primary-color: #1890ff;❌ 编译失败：漏@，Less 当成无效 CSS 属性丢弃 -
.btn { @size: 14px; }❌ 错误作用域：嵌套块内声明的变量无法被其他文件读取 -
@import "mixins/border-radius.less";❌ 禁止：若该文件含变量定义，会意外覆盖你刚设的值
@import 必须放在每个 .less 文件最顶部
Less 没有“全局变量池”，只有导入顺序决定谁生效。后 @import 的同名变量会覆盖前面的，但前提是它们处于同一编译上下文。
- ✅ 正确顺序：
@import "variables.less";→@import "themes/dark.less";→ 样式规则 - ❌ 错误写法：
.header { color: @color-brand-primary; }写在@import前 → 编译报错NameError: variable @color-brand-primary is undefined - Vue 单文件组件中
@import失效？因为scopedstyle 是独立编译单元，必须靠style-resources-loader注入，不能手动写 - Vite 用户注意：
vite-plugin-style-import配置里patterns要用path.resolve()绝对路径，别写@/styles/variables.less
主题切换必须用 CSS 变量桥接，不能指望 Less 运行时改
@primary-color 是编译期静态值，最终输出的是 color: #1890ff 这种硬编码。浏览器里没有“重新编译 Less”的机制。
- 在
variables.less中这样桥接：@color-brand-primary: var(--primary-color, #1890ff); - JS 控制：
document.documentElement.style.setProperty('--primary-color', '#ff6b6b'); - 注意：
lighten(@color-brand-primary, 10%)会失败——因为var(--primary-color)是字符串，Less 无法对其做颜色运算 - 颜色计算仍需用原始
@变量（如lighten(@color-brand-primary-base, 10%)），再把结果赋给 CSS 变量
多主题方案别搞多套 variables.less，用 Map + each() 生成 :root[data-theme]
手写 light-vars.less、dark-vars.less 容易漏改、命名不一致、@import 顺序错位静默覆盖。
- 用
@themesMap 结构集中维护：@themes: { light: { primary-color: #1890ff; }, dark: { primary-color: #177ddc; } }; - 配合
each()遍历生成不同:root[data-theme="xxx"]下的--primary-color - 取值必须用方括号：
@theme-vars[primary-color]，@theme-vars.primary-color会报错 - 构建工具需监听
themes.less变更，否则改了 Map 不触发重编译
真正容易被忽略的是：Less 变量只管开发期一致性，CSS 变量才管运行时响应性。两者职责分明，混用或跳过其中一层，主题就会漏控或失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
