Sass BEM 修饰符和子项

Question

我有以下 BEM 设置：

  .mytable {
      font-size: 16px;
        margin: 30px 0;
      &--standard {
        border: 1px solid red;
        &__row {
          border: 1px solid blue;
        }
      }

我想做的是仅将行样式应用于修改后的 table class.

这会输出以下内容

.mytable--standard__row {
  border: 1px solid blue;
}

这显然不是我想要达到的目标。

有neat/standard解决这个问题的方法吗？

Answer 1

我们使用：

  .mytable {
      font-size: 16px;
        margin: 30px 0;
      &--standard {
        border: 1px solid red;
      }
      &--standard &__row {
          border: 1px solid blue;
      }
  }

它并不理想（&& 祖父母选择器会很好），但它是迄今为止我们能想到的最好的选择器

Answer 2

您可以在修饰符后添加另一个符号以获得所需的输出：

.mytable {
  font-size: 16px;
  margin: 30px 0;

  &--standard {
    border: 1px solid red;
  }

  &--standard & { //<-- 

    &__row{
      border: 1px solid blue;
    }

    &__some-other-element{}

  }

}

Sass BEM 修饰符和子项

Sass BEM modifiers and children

sass

parent-child

bem