Less中BEM类名需用参数化mixin（如.bem()）实现，而非宏或变量拼接；它通过&配合when守卫生成.block__element、block--modifier等合法结构，严禁跨层嵌套或字符串插值选择器。
Less里没有宏，但可以用参数化混合（mixin）模拟
Less本身不支持宏（macro）语法，所谓“自动生成BEM类名”的需求，实际靠.bem()这类参数化mixin实现。它不是编译时宏，而是运行时展开的样式复用块，但效果接近——你传入block和element，它输出.block__element规则。
常见错误是试图用@variables拼接选择器：Less不允许变量直接参与选择器构造（如.@{name}在旧版本会报错或无效），必须用mixin包裹生成。
- 只在
mixin内部用&引用父级，避免选择器断裂 - 传参建议用字符串而非变量名，比如
.bem("header", "title")比.bem(@header, @title)更可控 - 如果需要修饰符（modifier），加第三个参数：
.bem("button", "icon", "primary")→.button__icon--primary
BEM mixin的标准写法与嵌套限制
典型bem()定义要覆盖block、block__element、block--modifier、block__element--modifier四种模式。关键点在于&的使用位置和嵌套层级控制：
.bem(@block, @element: null, @modifier: null) {
.@{block} {
& when (@element = null) and (@modifier = null) {
// block only
}
& when (@element != null) and (@modifier = null) {
&__@{element} {}
}
& when (@element != null) and (@modifier != null) {
&__@{element}--@{modifier} {}
}
& when (@element = null) and (@modifier != null) {
&--@{modifier} {}
}
}
}
注意：Less的when守卫不能嵌套在&内部再判断，必须在外层&后立刻用when分支；否则编译会忽略条件或报Recursive call to mixin错误。
立即学习“前端免费学习笔记（深入）”；
为什么不用@import拼接字符串生成类名？
有人尝试用@block + "__" + @element生成类名字符串再~".@{name}"，这会导致两个问题：
-
~".@{str}"是转义输出，无法绑定样式声明——它只是文本，不是选择器上下文 - 生成的选择器脱离作用域，无法继承父级
&链，BEM依赖的嵌套关系就断了 - Less 4.0+已废弃
~""用于选择器，新版直接报错Invalid CSS after "...": expected "{", was ""
所以必须用mixin + &组合，让编译器识别为真实选择器结构。
实际项目中容易漏掉的BEM边界场景
真实组件常有复合结构，比如card里嵌card__header再嵌card__header-title。这时.bem("card", "header")生成的.card__header内部不能再套一层.bem()——因为&会变成.card__header .card__header__title，违反BEM规范。
解决方式只有两种：
- 把深层元素提级定义：
.bem("card", "header-title")，哪怕语义上它是子元素 - 在
.card__header内部用普通类名（如.title），放弃BEM自动推导，手动保证命名唯一性
没有银弹。BEM + Less的约束本质是人为约定，mixin只是辅助，最终得靠团队对“什么算一个block”达成一致。
