Sass中高效编写BEM代码的技巧_利用父选择器符号精简CSS嵌套结构

在Sass中直接使用&__element写法可能导致BEM类名生成错误，本文将深入解析问题根源并提供三种专业解决方案。

为什么直接写 &__element 会失效？

开发者常犯的错误是在Sass中直接使用&符号拼接BEM元素，例如：

.card {  &__title { color: #333; }  &__content { padding: 1rem; }}

这种写法虽然能生成基础类名，但存在严重缺陷：当遇到修饰符或嵌套组件时，由于&仅代表最近父选择器的字面值，无法正确处理BEM语义关系。尤其在变量或混入场景下，会导致类名拼接错误。

用 @function + @each 动态生成 BEM 类名

推荐通过自定义函数实现类名动态生成，确保BEM结构的准确性：

@function bem($block, $element: null, $modifier: null) {  $result: $block;  @if $element { $result: $result + '__' + $element; }  @if $modifier { $result: $result + '--' + $modifier; }  @return $result;}.card {  {bem('card', 'title')} { font-weight: bold; }  {bem('card', 'content', 'expanded')} { max-height: 300px; }}

1. 必须使用插值语法#{...}而非直接拼接
2. 块名建议使用字符串字面量避免命名冲突
3. 不支持多级元素嵌套，符合BEM规范要求

修饰符类名必须独立声明，不能靠 &--mod 硬套

修饰符的正确使用方式应当遵循BEM核心原则：

.card {  &--featured {    background: gold;    &__title { color: #fff; }  }  &__title { color: #222; }}

1. 修饰符应作用于块级而非元素级
2. 元素修饰符需单独定义确保可复用性
3. 注意嵌套生成的选择器权重关系

用 @mixin 封装带命名空间的 BEM 块更安全

对于多组件共享的结构，建议使用混入封装：

@mixin block($name) {  .#{$name} {    &__header { margin-bottom: 0.5rem; }    &__body { line-height: 1.6; }    &--compact &__body { padding: 0.25rem; }  }}

1. 避免在混入内跨块拼接类名
2. 组合场景建议使用@extend或工具类
3. Sass 5.0+推荐使用模块化方案管理工具函数

掌握这些BEM编写技巧能显著提升Sass代码的可维护性，建议根据项目规模选择合适的类名生成方案。