Less不支持运行时动态拼接选择器，变量仅作文本替换；应使用Mixin封装固定结构的类名生成，避免非法字符和空值问题，真正动态需求应交由JS或CSS自定义属性处理。
Less里不能直接拼接变量生成选择器
Less编译时变量只是文本替换，@variable 无法像JavaScript那样参与字符串拼接构造选择器。写成 .class-@{name} {} 是合法的，但 .@{prefix}-item {} 这类“变量在选择器开头”的写法，一旦 @prefix 为空或含非法字符（比如空格、点号），就会编译失败或产出无效CSS。
常见错误现象：ParseError: Unrecognised input 或生成的选择器多出点号、连字符错位，比如 . -item。
- 变量必须提前定义为合法CSS标识符（只含字母、数字、下划线、短横线）
- 避免用
@{}包裹空值或含空格的字符串 - 不要依赖运行时逻辑——Less没有条件拼接选择器的能力
用Mixin封装动态选择器逻辑
真正可行的做法是把“变量+固定结构”封装进Mixin，靠参数驱动生成。比如要批量生成 .btn-primary、.btn-danger 这类类名，就别试图拼接，而是传参进去：
.make-button-type(@type) {
.btn-@{type} {
background-color: if(@type = primary, #007bff, #dc3545);
}
}
.make-button-type(primary);
.make-button-type(danger);
这样既安全又清晰。关键点在于：Mixin是编译期展开的，参数被当作符号处理，不会触发非法字符解析。
立即学习“前端免费学习笔记（深入）”；
- 参数名不用加
@前缀（.make-button-type(@type)中@type是形参，调用时primary是字面量） - 避免在Mixin内部对参数做复杂字符串操作，比如
replace(@type, 'foo', 'bar')在旧版Less中不可靠 - 如果需要多级嵌套类名（如
.card .card-@{size}-header），确保所有变量都已正确定义且非空
慎用 ~"..." 拼接选择器
~"string" 是Less的“转义字符串”，能绕过编译器校验直接输出原始文本，看似能解决动态问题，但隐患很大：
例如：@cls: "sidebar"; @{~".@{cls}-content"} { color: red; } 编译后是 .sidebar-content { color: red; } —— 表面上成功了，但一旦 @cls 是 "123" 或 "a b"，就会输出非法选择器，浏览器直接忽略，且Less不报错。
- 这种写法失去语法检查，调试困难
- 无法与嵌套规则、& 运算符安全配合（
&:@{~".@{suffix}"}容易崩） - 仅限极少数场景：比如对接遗留系统必须按特定命名格式生成类名，且变量来源完全可控
更推荐用CSS自定义属性 + JS动态控制
如果需求本质是“运行时根据状态切换样式”，Less不是合适工具。比如想让 .user-{id} 类名随用户ID变化，应该放弃在Less里生成，改用：
HTML中写 class="user" data-user-id="123"，CSS写 .user[data-user-id="123"] { ... }；或者用JS动态添加类名，配合CSS-in-JS或纯CSS变量控制样式分支。
Less适合编译期确定的样式复用，不适合模拟运行时逻辑。强行用变量+Mixin模拟，很快会遇到维护瓶颈：一个 @theme 变量牵扯几十处选择器，改一处就得全局核对。
真正容易被忽略的是：所谓“动态选择器”，90%的情况其实是误判了职责边界——该由JS或组件框架解决的问题，硬塞进预处理器，只会让样式逻辑越来越难追踪。
