sass - BEM/SCSS で変更されたセレクターのサブコンポーネントを記述する最良の方法

Question

SCSS で、冗長になることなく BEM サブコンポーネントを記述し、親クラスを使用してそれらを変更するための洗練された方法が必要です。

.container.container--red .container__title {
}

私はこれを試しましたが、うまくいきませんでした：

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

しかし、必要なセレクターが .container--red__title であると想定しているため、これは機能しません

Answer 1

これはあなたが使いたいものではありませんか？

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

へのコンパイル

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

コンパイルの出力について考える必要があるため、階層は sass でもカウントされることを忘れないでください。