less变量无法运行时修改，必须用css自定义属性承接主题值：其在构建阶段即被编译为固定值，浏览器中不可见；换肤需将主题色等定义为:root下的--primary-color等css变量，并在less中通过~"var(--primary-color)"安全引用，再由js动态setpropertyvalue实现。
Less变量无法在运行时修改，必须用CSS自定义属性承接主题值
Less编译发生在构建阶段，@primary-color这类变量最终会被替换成固定值（如 #409eff），浏览器里根本看不到它。想换肤，得让样式“活”起来——把主题色、间距、圆角这些可变项全部落到 :root 的 CSS 自定义属性上，再让 Less 生成的 CSS 规则去读取它们。
典型错误是写成这样：@primary: #409eff; .btn { color: @primary; }——这完全没用，换肤时改不了。
正确做法是：
- 所有主题相关值都定义为
--primary-color、--border-radius-sm等 CSS 自定义属性，挂载在:root或特定 class 下（如.theme-dark） - Less 中统一用
var(--primary-color)引用，不要用@变量中转 - 换肤只需切换
document.documentElement.className或动态设置style.setProperty，无需重新编译 Less
如何在Less中安全使用var()并避免编译报错
Less 默认会尝试解析 var(--x) 里的 --x，如果写成 color: var(--primary-color);，Less 通常能放过它；但某些旧版本或复杂嵌套下可能报 Variable @primary-color is undefined 错误——其实是它把 --primary-color 误认成了 Less 变量。
解决方法只有两个：
- 加引号强制字符串化：
color: ~"var(--primary-color)";（推荐，兼容性最好） - 或用
replace()函数兜底（不必要，反而增加心智负担） - 注意：不要用
lighten(var(--primary-color), 10%)这类函数包裹var()，CSS 函数不支持嵌套计算，浏览器直接忽略
示例：
.btn {
color: ~"var(--primary-color)";
border-radius: ~"var(--border-radius-md)";
background: ~"var(--bg-surface)";
}
主题切换时如何避免样式闪烁和继承断裂
直接在 :root 上设一堆 --xxx，换肤时全量覆盖，看似简单，但有两个坑：
- 未声明 fallback 值的
var(--color, #000)在 JS 切换主题瞬间，若新值还没生效，会回退到默认色，造成闪动 - 子组件若依赖父级 theme class（如
.theme-dark .card），但你只改了:root，那些规则就失效了
稳妥方案是分层控制：
- 基础变量（颜色、间距等）全放
:root，带 fallback：color: var(--text-primary, #333); - 主题专属样式（如深色模式下的阴影、背景渐变）用 class 隔离：
.theme-dark { --bg-surface: #1f1f1f; } - JS 切换时，先设 class 再批量 setProperty，或用
CSSStyleSheet.replace()批量注入整套变量，减少重排
为什么不能用Less Mixin封装主题逻辑
有人想写个 .theme-mixin(@color)，然后在不同 class 里调用它生成对应样式。这看起来灵活，实则违背运行时换肤前提——Mixin 仍是编译期展开，最终输出的 CSS 里还是固定值，跟手写 .theme-light { color: #333; } 没本质区别。
真正需要的是“一套 CSS + 多组变量”，而不是“多套 CSS”。所以 Mixin 只适合生成工具类（如 .m-4），不适合主题系统。
容易被忽略的一点：CSS 自定义属性有继承性，但 font-size、color 等原生属性不会自动响应变化——必须确保目标元素显式写了 color: var(--text-primary);，否则改了变量也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
