Лучший способ написать подкомпонент модифицированного селектора в BEM/SCSS

Question

Я хочу, чтобы в SCSS был хороший элегантный способ писать подкомпоненты BEM без подробного описания и изменять их с помощью родительского класса.

.container.container--red .container__title { 
} 

Я попытался это, но он не работает:

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

Но это не работает, потому что он принимает селектор мне нужно это .container - red__title

Answer 1

СКС:

.container { 
    $root: &; 

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

выход:

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

Answer 2

Разве это не то, что вы хотели бы использовать?

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

Компилирование в

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

Не забывайте, что иерархия до сих пор считается в дерзости, потому что вы должны думать о выходе компиляции.