使用 Sass 定位 BEM 格式的 CSS 选择器答案

【问题标题】：Targeting BEM-formatted CSS selectors with Sass使用 Sass 定位 BEM 格式的 CSS 选择器
【发布时间】：2021-09-29 05:31:12
【问题描述】：

我试图通过在我自己的主题样式表中覆盖它们来稍微修改 Wordpress 中块格式插件的样式。我使用 Sass，但我是新手。

直接从开发者工具中粘贴所有选择器是可行的，但我知道这不是优雅/模块化的方式：

.an-accordion.an-accordion--v2.an-accordion.an-accordion--design-basic .an-accordion__heading { 
    color: gold 
}

在 Sass 中执行此操作的正确方法是什么？我尝试过这样的事情：

.an-accordion {
    &--v2 {
        &--design-basic {
            &__heading {
                color: gold;
            }
        }
    }
}

但它不起作用。我可以说我错过了 .an-accordion 重复的方式。

【问题讨论】：

这实际上是一个很好的问题。我花了一些时间想出一个解决方案。

标签： css wordpress sass bem

【解决方案1】：

BEM 是关于块、元素和修饰符的。 Block 范围是最大的，element 是块内的某个部分，modifier 是可选的，代表你的块元素的状态.在 Sass 中，如果元素是 父子元素，则您可以嵌套元素，并且如果开始，则在您的 stlesheet 中您不需要重复父元素你的属性的strong>对于父母和孩子是相同的，但如果开始是不同你必须重复。

在这样的 html 中：

<div class=" an-accordion an-accordion--v2 .an-accordion--design-basic .an-accordion__heading"></div>

你可以有一些这样的 scss 代码：

    .an-accordion{
        color: #000;

      &__heading{
         background-color: tomato;
       }

      &--v2{
         font-weight: bold;
       }

       &--design-basic{
          border: none;
       }
    }

【讨论】：

【解决方案2】：

您可以使用 局部范围字符串变量 $something:... 的强大功能与 字符串插值 #{...} 的强大功能，并将其与 当前选择器结合使用string & 为 block、element 和 modifier 的任意组合创建复合选择器。我认为它非常好且易读：

.an-accordion {
  $modifier-v2: #{&}--v2;
  $modifier-design-basic: #{&}--design-basic;
  $element-heading: #{&}__heading;

  &#{$modifier-v2}#{$modifier-design-basic} {
    #{$element-heading} {
      color: gold;
    }
  }
}

这将导致：

.an-accordion.an-accordion--v2.an-accordion--design-basic .an-accordion__heading {
  color: gold;
}

我在sassmeister.com上试过了

请注意，我在选择器中省略了重复的.an-accordion 类；如果这对您增加特异性很重要，您可以使用#{&} 插入它。

【讨论】：