如何在Less中定义宏来自动生成符合CSS BEM规范的类名？-css教程-PHP中文网

less中bem类名需用参数化mixin（如.bem()）实现，而非宏或变量拼接；它通过&配合when守卫生成.block__element、block--modifier等合法结构，严禁跨层嵌套或字符串插值选择器。

如何在less中定义宏来自动生成符合css bem规范的类名？

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}"，这会导致两个问题：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

~".@{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规范。

解决方式只有两种：