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

问题描述

我试图通过在我自己的主题样式表中覆盖它们来稍微修改 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 重复方式的某些内容。

解决方法

BEM 是关于块、元素和修饰符的。块作用域是最大的，元素是块内的某个部分，修饰符是可选的，表示块元素的状态.在 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;
       }
    }

您可以使用局部作用域字符串变量 $something:... 与字符串插值 #{...} 的强大功能，并将其与当前选择器字符串 & 为块、元素和修饰符的任意组合创建复合选择器.我认为这是非常好的和可读的：

.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 类；如果这对您增加特异性很重要，您可以使用 #{&} 插入它。

bem sass sass wordpress wordpress