sass - 在 BEM/SCSS 中编写修改选择器的子组件的最佳方法

Question

我想在 SCSS 中以一种优雅的方式来编写 BEM 子组件而不是冗长，并使用父类对其进行修改。

.container.container--red .container__title {
}

我试过这个，但没有奏效：

.container {
   &.container--red {
      &__title {
      }
   }  
}

但这不起作用，因为它假设我需要的选择器是 .container--red__title

Answer 1

scss：

.container {
    $root: &;

    &--red {
        #{$root}__title {
            color: red;
        }
    }  
}

输出：

.container--red .container__title {
    color: red;
}

Answer 2

这不是你想要使用的吗？

.container { &--red {} &__title {} }

编译为

.container {} .container--red {} .container__title {}

不要忘记层次结构在 sass 中仍然很重要，因为您需要考虑编译输出。