less不支持字符串拼接生成选择器，@{}插值在选择器中无效；正确方式是用参数化mixin显式调用或each()配合~""转义批量生成。
Less里不能用字符串拼接生成选择器
Less本身不支持运行时字符串拼接来构造选择器名，&、@{} 插值语法只在属性值或@import路径中有效，**不能用于选择器主体**。试图写 .class-@{suffix} {} 或 .prefix@{name} {} 会直接报错：ParseError: missing opening '{' 或更隐晦的解析失败。
用参数化混合（mixin）模拟“动态选择器”
实际要的是“一套样式逻辑复用到不同前缀/后缀的选择器下”，正确做法是把选择器结构提前写死，把变化部分抽成 mixin 参数，再显式调用：
.make-button-style(@prefix) {
<code>@{prefix}-btn</code> {
padding: 8px 16px;
border-radius: 4px;
}
<code>@{prefix}-btn:hover</code> {
opacity: 0.8;
}
}
// 调用
.make-button-style(primary);
.make-button-style(danger);
编译后生成：
.primary-btn { padding: 8px 16px; border-radius: 4px; }
.primary-btn:hover { opacity: 0.8; }
.danger-btn { padding: 8px 16px; border-radius: 4px; }
.danger-btn:hover { opacity: 0.8; }
用循环 + each() 配合 ~"" 实现批量生成（Less 4.0+）
如果必须批量生成大量带固定模式的选择器（如图标类 .icon-home、.icon-user），可用 each() 遍历列表，配合转义字符串 ~"@{item}" 构造选择器（注意：必须用 ~"" 包裹，否则插值无效）：
@icons: home, user, settings, logout;
each(@icons, {
<code>~".icon-@{value}"</code> {
background-image: url("icon/@{value}.svg");
}
});
关键点：
-
~".icon-@{value}"中的~""是必须的，它告诉 Less 把里面内容当纯 CSS 字符串输出 -
each()是 Less 4.0 引入的函数，旧版本不支持 - 不能嵌套计算，比如
~".icon-@{value}-@{size}"要确保@size已定义且为字符串
为什么不用 JavaScript 方案？
有人想用 @plugin 或外部 JS 处理，但没必要——Less 的设计哲学是编译期静态处理。所有“动态”需求本质都是有限组合，硬塞运行时逻辑反而破坏可预测性、增加构建复杂度、让同事难维护。真正需要服务端动态 CSS 的场景（如主题 ID 来自 API），应该交由 CSS-in-JS 或构建时模板（如 Webpack DefinePlugin 注入变量）处理，而不是在 Less 里绕弯子。
最常被忽略的一点：选择器拼接往往暴露了抽象不足。与其花力气拼字符串，不如检查是否该用 BEM 命名 + &__element 继承，或拆成更小粒度的 mixin + 显式调用——后者更容易 debug，也更符合 Less 的思维模型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
