如何在Sass中为不同BEM块的相同元素与修饰符设置全局样式？

针对你遇到的不同BEM块（如.header、.footer）下存在相同元素修饰符（__column--6）需要统一设置样式的场景，以下是几种可行的Sass解决方案：

方案1：使用占位符（%）+ @extend #

先定义通用的样式占位符，再在各个块中继承该样式，编译后会自动合并对应选择器，避免代码重复：

// 定义通用样式占位符
%column--6 {
  width: 50%;
}

// 在各个块中继承
.header {
  &__column--6 {
    @extend %column--6;
  }
}

.footer {
  &__column--6 {
    @extend %column--6;
  }
}

编译后的CSS输出：

.header__column--6, .footer__column--6 {
  width: 50%;
}

方案2：使用混合宏（@mixin）+ @include #

如果需要后续为不同块的元素添加额外样式，混合宏会更灵活，它会将样式直接注入到对应选择器中：

// 定义混合宏
@mixin column--6 {
  width: 50%;
}

// 在各个块中引入
.header {
  &__column--6 {
    @include column--6;
    // 可添加.header专属样式
    padding-top: 10px;
  }
}

.footer {
  &__column--6 {
    @include column--6;
    // 可添加.footer专属样式
    padding-bottom: 10px;
  }
}

编译后的CSS输出：

.header__column--6 {
  width: 50%;
  padding-top: 10px;
}

.footer__column--6 {
  width: 50%;
  padding-bottom: 10px;
}

方案3：使用属性选择器（谨慎使用） #

通过CSS属性选择器匹配所有以__column--6结尾的类名，但需注意可能出现误匹配（如.other__column--6-extra这类带后缀的类），适合简单场景：

[class$="__column--6"] {
  width: 50%;
}

若要更精准匹配，可排除带有额外后缀的类：

[class*="__column--6"]:not([class*="__column--6-"]) {
  width: 50%;
}

优先推荐方案1和方案2，它们既保留了BEM的块结构，又能高效复用样式，避免冗余代码。

内容的提问来源于stack exchange，提问作者Bitkit