Less不支持变量直接拼接选择器名，如.@{prefix}-primary会报语法错误；须用mixin封装，配合join()与e()函数拼接类名，如.gen-class("card", "sm", "hover")输出.card-sm-hover。
Less变量不能直接拼接进选择器名
Less本身不支持把变量值当作选择器的一部分动态插入，比如写 @prefix: "btn" 然后想用 .@{prefix}-primary 生成 .btn-primary —— 这种写法在 Less 中**语法错误**。Less 解析器在编译期只允许变量用于属性值、函数参数或 mixin 参数，不支持“变量驱动选择器结构”。
用 mixin + 拼接参数模拟动态类名
真正可行的方式是把类名拼接逻辑封装进 mixin，并用 ~"" 字符串插值（注意：仅适用于 Less 3.5+）或 selector()（Less 4.0+）来构造选择器。但要注意：~"" 只能用于属性值上下文，不能直接当选择器；必须配合 & 和嵌套才能生效。
- 推荐写法（Less 4.0+）：
.make-class(@name, @suffix) { @{name}-@{suffix} { color: red; } } .make-class("btn", "primary"); - 更灵活的拼接（支持多段）：
.gen-class(@base, @mod...) { @joined: e(join("-", @mod)); @{base}-@{joined} { font-weight: bold; } } .gen-class("card", "sm", "hover"); // 输出 .card-sm-hover - ⚠️ 注意：
join()返回的是字符串，e()是为了防止 Less 自动转义（比如把-转成减号运算），否则可能编译失败
避免用 ~".@{name}" 写选择器
这种写法看起来像能用，但实际会报错或生成无效 CSS。Less 不允许在选择器位置使用 ~"" 插值，它只在属性值中有效。例如：
// ❌ 错误：Less 编译报错
~".@{prefix}-disabled" { opacity: 0.5; }
即使某些旧版本“侥幸通过”，输出也是字面量字符串，不是真实选择器。
- 常见错误现象：
ParseError: Unexpected token '.'或生成空规则 - 替代方案：老版本 Less（.btn-primary()、
.btn-secondary()，无法完全动态 - 如果真要运行时生成（如对接 JS 主题系统），应由 JS 动态加 class，而不是靠 Less 编译期拼接
拼接后的选择器优先级与维护风险
动态生成的类名虽然灵活，但会削弱 CSS 的可读性和调试性。开发者看不到源码里的完整类名，DevTools 中看到的是编译结果，而源码里只有 mixin 调用。
- 性能上无影响（编译期完成），但容易导致重复生成相同类（比如多次调用
.gen-class("btn", "primary")） - 建议加守卫条件或用
!important控制覆盖逻辑时格外小心——拼接类名的 specificity 和手写一致，但命名不可控易冲突 - 真正需要“大量变体”的场景（如原子化 CSS），不如换用 Tailwind 或直接写 PostCSS 插件，Less 不是为此设计的
拼接类名这件事，Less 做得勉强，边界清晰但容错低；稍不留神就从“省事”变成“查半天为啥没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
