Less变量通过独立variables.less配合构建工具动态注入实现多主题切换，Mixin封装主题敏感逻辑，构建时生成多CSS文件或映射为CSS变量配合JS切换，需避免硬编码和作用域错误。
Less变量如何支撑多主题切换
主题切换本质是值的批量替换，Less变量（@primary-color、@bg-base）天然适合做这个“开关”。但关键不是定义变量，而是让变量可被外部动态注入——不能硬写在theme-dark.less里，而要抽成独立的variables.less，再通过构建工具（如Webpack的less-loader）传入不同modifyVars覆盖。
- 变量必须用
@前缀声明，且避免用!important或内联样式覆盖，否则会破坏变量链 - 所有组件样式需基于这些变量编写，比如
background: @bg-base;，而不是background: #1e1e1e; - 不要嵌套变量引用：
@hover-color: darken(@primary-color, 10%);可行，但@hover-color: @primary-color-hover;（依赖另一个未定义变量）会导致编译失败
Mixin封装主题专属逻辑的正确姿势
Mixin不是为了复用代码，而是为了隔离主题敏感逻辑。比如暗色模式下需要调整阴影强度、文字对比度、边框透明度，这些不能靠全局变量一概而论，得用带参数的Mixin控制。
- 写成
.theme-aware-shadow() { box-shadow: 0 2px 8px @shadow-color; }比直接写box-shadow更可控 - 避免无参Mixin堆砌，例如
.dark-mode-only { ... }这种命名容易误导——它不自动生效，仍需手动调用或配合CSS类切换 - 如果主题差异大（如RTL布局翻转），建议用
.theme-rtl() { direction: rtl; }这类语义化Mixin，而非在每个选择器里重复写direction
构建时注入变量 vs 运行时切换的取舍
Less是编译时预处理器，所谓“运行时切换主题”其实是假象：你不可能在浏览器里重跑Less编译。真实做法只有两种：
-
构建多套CSS文件（
app-light.css/app-dark.css），由JS切换<link>标签——简单、兼容性好、无运行时开销立即学习“前端免费学习笔记（深入）”；
构建一套CSS，但把所有主题变量转成CSS自定义属性（
--primary-color），再用JS改document.documentElement.style.setProperty——灵活但需确保所有Less变量都映射到CSS变量，且注意性能（频繁触发重排）Less中无法直接生成
:root { --primary-color: @primary-color; }并保证它可被JS读取，必须手动桥接或借助插件（如less-plugin-custom-properties）若用CSS变量方案，
@media (prefers-color-scheme: dark)可以作为fallback，但它不响应JS主动切换，仅响应系统设置
常见报错和调试盲区
最常卡住的地方不是语法，而是变量作用域和加载顺序：
-
Variable @text-primary is undefined：说明该变量没被@import进来，或被@import语句放在了使用它的文件之后 - 切换主题后部分样式没变：检查是否漏写了某个组件的
.theme-aware-xxx()调用，或者用了硬编码颜色而绕过了变量 - Webpack中
modifyVars不生效：确认less-loader版本（v7+才支持对象式传参），且lessOptions配置项名在不同版本中可能是lessOptions或options
主题引擎真正难的不是写多少Mixin，而是让每个视觉原子都对变量有明确依赖路径——漏掉一个按钮的border-color，整个主题就破了一个洞。
