.theme-dark没生效是因为less中无法用变量直接拼接选择器名，必须用~".@{name}"进行选择器插值，且@name须为带引号字符串；.each()可遍历主题映射表批量生成，但仅限编译期输出静态css，运行时换肤仍需js切换html类名。
Less中用变量+循环生成主题类名时，为什么.theme-dark没生效？
因为Less的for循环（实际是.each() mixin）不能直接拼接选择器名——CSS选择器必须在编译期确定，而动态拼接的字符串会被当作普通值处理。常见错误是写成：.make-theme(@name) { .@{name} { ... } }，这会报错或生成无效规则。
正确做法是用~".@{name}"做选择器插值，并确保调用时传入的是字符串字面量：
.make-theme(@name) {
~".@{name}" {
--primary: #007bff;
--bg: #1a1a1a;
}
}
.make-theme("theme-dark");
.make-theme("theme-light");
- 必须用
~""包裹，否则Less会把.@{name}识别为嵌套规则而非选择器 -
@name必须是字符串（带引号），不能是未定义变量或数字 - 生成的类名不支持运行时切换，仅用于预编译输出多个主题CSS块
如何让theme-blue和theme-green共享同一套变量结构？
靠@themes映射表 + .each()遍历，避免重复写mixin。把颜色配置抽成map，再用get()提取值：
@themes: (
"theme-blue": (
primary: #0066cc,
bg: #f0f8ff
),
"theme-green": (
primary: #28a745,
bg: #f8fdf9
)
);
.each(@themes, {
@name: @key;
@config: @value;
~".@{name}" {
--primary: get(@config, primary);
--bg: get(@config, bg);
}
});
-
get()是Less 4.0+内置函数，旧版本需手写.get-map()mixin - 所有主题变量必须结构一致，否则
get()取不到值会回退为undefined - 生成的CSS体积随主题数线性增长，10个主题就多出10份变量声明
为什么加了!important还是被用户自定义样式覆盖？
因为CSS优先级规则里，内联样式 > ID > 类 > 标签，而!important只解决层内冲突。Less生成的.theme-dark类默认权重是10，远低于#app .header button这种组合选择器（权重21）。
- 不要依赖
!important强行提权，改用更具体的选择器，比如.theme-dark .btn - 若需全局接管，用
:root.theme-dark配合CSS Custom Properties，由JS在上切类 - Less无法控制HTML结构，所以“换肤”最终依赖JS挂载类名的位置是否合理
用@plugin扩展Less能实现运行时换肤吗？
不能。@plugin只在编译阶段执行，生成静态CSS，和JavaScript无关。所谓“动态换肤”，本质是两件事：Less负责生成多套CSS变量定义，JS负责在DOM上切换根节点类名并触发重绘。
- Less输出的只是
:root.theme-dark { --color: #000 }这类声明，不包含任何JS逻辑 - 如果想免编译，该用CSS-in-JS库（如Linaria）或纯CSS变量+JS，而不是硬塞Less里
- 最容易被忽略的一点：浏览器不支持
var(--color)嵌套计算（如color: var(--color-lighten);），得靠calc()或预编译出明确定义的变量
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
