less变量不能直接拼接生成类名，因变量编译时求值，不支持字符串拼接后作为选择器名展开；.@{name}合法，但.prefix-@{name}在旧版less中不被支持。
Less变量不能直接拼接生成类名
Less的变量是编译时求值的，@name 本身不支持字符串拼接后作为选择器名展开。你写 .@{name} 是合法的，但 .prefix-@{name} 这种写法在旧版 Less（
用 ~"" 拼接选择器需谨慎
Less 提供了转义字符串语法 ~""，可以强制将内容按原样输出为 CSS。但注意：它只适用于属性值、声明块内部，**不能安全用于选择器开头**。
-
.@{prefix}-item { color: red; }—— ✅ 合法，前提是@prefix是纯字母/短横线字符串（如@prefix: menu） -
.~"@{prefix}-item" { color: red; }—— ❌ 编译失败（Less 4.0+ 会警告，旧版直接报错） - 真正能用
~""的地方是：content: ~"'hello'";或background-image: ~"url(@{path})";
推荐方案：用 .each() 配合映射（Less 4.0+）
如果你需要批量生成形如 .btn-primary、.btn-danger 的类，最可靠的方式是定义一个映射（map），再用 .each() 循环展开：
@buttons: {
primary: #007bff;
danger: #dc3545;
success: #28a745;
};
.each(@buttons, .(@color, @type) {
.btn-@{type} {
background-color: @color;
border-color: darken(@color, 10%);
}
});
这样生成的 CSS 是确定的、可预测的，且不依赖运行时 JS，完全在编译阶段完成。
替代思路：CSS 自定义属性 + JS 动态类控制
如果真需要“运行时动态类名”，Less 不是合适工具——它没有运行时能力。应该把变量逻辑交给 JS，用 CSS 自定义属性配合 class 切换：
- Less 中只定义基础样式：
.btn { background-color: var(--btn-bg); } - JS 设置：
el.classList.add('btn'); el.style.setProperty('--btn-bg', '#007bff'); - 或预设好类：
.btn--primary { --btn-bg: #007bff; }，再由 JS 切换btn btn--primary
硬要用 Less 拼类名，最后往往卡在命名冲突、调试困难、无法 source map 定位上——那不是变量的问题，是混淆了编译期和运行期职责。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
