使用正确的 BEM 方法时如何保留高级 SASS 嵌套选项

Question

这已经讨论过很多次了，但我还没有看到一个正确的答案。我想在我的代码中使用 BEM 方法，但我想保留高级 SASS 嵌套选项以提高代码可读性。

这是我的代码示例：

<div class="education">
    <h3 class="education__heading">Heading</h3>
    <div class="education__items">
        <div class="education__item">
            <h4 class="education__faculty">Lorem ipsum</h4>
            <span class="education__subject">Dolor sit amet</div>
        </div>
    </div>
</div>

这应该是具有 3 层嵌套的正确 BEM 模型。这个模型的 SASS 代码如下所示：

.education {

    &__heading {

    }

    &__items {

    }

    &__item {

    }

    &__faculty {

    }

    &__subject {
        
    }
}

据我所知，这是正确的方法，但我错过了在我的 SASS 代码中嵌套类的选项（参见下面的简化示例，没有 BEM 类名）：

.education {

    .heading {

    }

    .items {

        .item {

            .faculty {

            }

            .subject {

            }
        }
    }
}

这个结构基本上复制了HTML结构，我相信它很容易维护和阅读。 在使用正确的 BEM 方法时，是否可以在 SASS 中保留多级嵌套？

Answer 1

我知道的唯一解决方案是三个技巧：

1. 使用@at-root 规则，无论嵌套多深，它都会将声明移到顶部
2. 将块选择器保存在一个变量中，使用&作为赋值的值
3. 使用#{} 在选择器中插入变量

在你的情况下，它看起来像这样：

.education {
    // Save `.education` in the $block variable
    $block: &;

    @at-root #{$block}__heading {
        /* Heading styles */
    }

    @at-root #{$block}__items {
        /* Items styles */

        @at-root #{$block}__item {
            /* Item styles */

            @at-root #{$block}__faculty {
                /* Faculty styles */
            }

            @at-root #{$block}__subject {
                /* Subject styles */
            }
        }
    }
}

并将编译为：

.education__heading {
  /* Heading styles */
}
.education__items {
  /* Items styles */
}
.education__item {
  /* Item styles */
}
.education__faculty {
  /* Faculty styles */
}
.education__subject {
  /* Subject styles */
}