在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中，因为您需要考虑编译输出。