如何在Less中定义宏来自动生成符合CSS BEM规范的类名？

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”达成一致。