如何使用 BEM 方法论在 SCSS 中处理变体

Question

我正试图解决我在使用 BEM 时遇到的这个愚蠢但烦人的问题。目前，对于我的应用程序，我遵循 BEM 方法来创建 UI 元素。例如：

<div class="card">
    <h2 class="card__title">Sample Title </h2>
    <h3 class="card__subtitle"> Sub Title </h3>
    <button class="card__action"> Action Button </button>
</div>

此 scss 将是：

.card{
     &__title{color:red}
     &__subtitle{color:violet}
     &__subtitle{bakground:black}
}

现在如果我需要添加卡的新变体，我会将其添加为“卡--修饰符”。

.card{
    &--variant{background-color:white}
    &__title{color:red}
    &__subtitle{color:violet}
    &__subtitle{bakground:black}
}

现在，在不破坏 scss 中的这种嵌套的情况下，我如何修改变体下子项的属性？

Answer 1

在这种情况下，我不会因为重复一两个类名而大惊小怪。

如果在 card--variant 的情况下您希望 card__title 具有蓝色字体颜色，您可以在规则末尾添加必要的更改（顺序很重要，保持你的特异性低并在最后添加特殊情况）

.card {
   &__title { color: red; }
   &__subtitle { color: violet; }
   &__action { background-color: black; }

   &--variant {
       .card__title { color: blue; }
   }
}

如果出于某种原因您坚决不想重复名称，您可以在变量中捕获 block-level 名称并使用字符串插值：

.card {
   $block: &;
   &__title { color: red; }
   &__subtitle { color: violet; }
   &__action { background-color: black; }

   &--variant {
       .#{$block}__title { color: blue; }
   }
}

如何使用 BEM 方法论在 SCSS 中处理变体

How to Handle Variant in SCSS using BEM Methodology

html

css

sass

bem