如何使用 BEM 方法处理 SCSS 中的变体答案

【问题标题】：How to Handle Variant in SCSS using BEM Methodology如何使用 BEM 方法处理 SCSS 中的变体
【发布时间】：2022-02-21 12:59:07
【问题描述】：

我正在尝试找出我在 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--modifier”。

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

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

【问题讨论】：

标签： html css sass bem

【解决方案1】：

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

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

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

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

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

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

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

【讨论】：