如何结合BEM与SASS为多区块标题统一设置样式？

针对你遇到的问题，在遵循BEM规范的前提下，有两种清晰的解决方式，不需要重复编写嵌套代码：

方案一：添加共享工具类（兼容BEM模块化思想） #

如果允许修改HTML，可以给两个标题元素添加一个通用的工具类，将共享样式抽离到这个类中，同时保留BEM的区块-元素命名。

示例代码： #

HTML：

<section class="section1">
  <p class="section1__tittle c-section-heading"></p>
</section>
<section class="section2">
  <p class="section2__tittle c-section-heading"></p>
</section>

SASS：

// 抽离共享样式到工具类
.c-section-heading {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  // 其他共享样式
}

// 区块专属样式（如果有的话）
.section1 {
  &__tittle {
    @extend .c-section-heading;
    // section1标题的专属样式，比如margin-top: 1rem;
  }
}

.section2 {
  &__tittle {
    @extend .c-section-heading;
    // section2标题的专属样式
  }
}

这种方式的优势是语义清晰，共享样式可以复用在其他需要的地方，同时每个区块的元素依然保持独立，符合BEM的模块化原则。

方案二：用SASS特性简化写法（无需修改HTML） #

如果不想改动现有HTML结构，可以利用SASS的占位符选择器或循环功能，实现代码复用，同时编译后的CSS会自动合并选择器，和你手写的合并效果一致。

子方案2.1：占位符选择器 + @extend #

占位符选择器（%）是SASS专属的，编译后不会生成单独的类，只会被@extend的选择器合并：

// 定义共享样式的占位符
%section-tittle-style {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
}

.section1 {
  &__tittle {
    @extend %section-tittle-style;
    // 专属样式
  }
}

.section2 {
  &__tittle {
    @extend %section-tittle-style;
    // 专属样式
  }
}

编译后的CSS结果：

.section1__tittle, .section2__tittle {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
}

子方案2.2：SASS循环（适合多区块场景） #

如果后续可能新增更多类似的section区块，用循环会更高效：

// 定义需要统一处理的区块列表
$section-blocks: section1 section2;

@each $block in $section-blocks {
  .#{$block} {
    &__tittle {
      // 共享样式
      font-size: 1.5rem;
      font-weight: 600;
      color: #333;
      
      // 可选：给特定区块添加专属样式
      @if $block == section1 {
        margin-top: 1rem;
      }
    }
  }
}

这种写法只需要维护$section-blocks变量，新增区块时直接在列表里添加即可，极大减少重复代码。

方案选择建议 #

• 若共享样式需要在多个无关区块中复用，优先选方案一，工具类的复用性更强；
• 若只是当前两个区块的元素样式一致，且不想修改HTML，选方案二更合适，完全贴合BEM的命名结构，同时利用SASS简化开发。

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