Sass BEM модификаторы и дети

Question

У меня есть следующие настройки БЭМ:

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

Я пытаюсь применить стили строк только к измененному классу таблицы.

В результате выдается следующее

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

Что, очевидно, не то, чего я пытаюсь достичь.

Есть ли изящный / стандартный способ решения этой проблемы?

Answer 1

Вы можете добавить еще один амперсанд после модификатора, чтобы получить желаемый результат:

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

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

  &--standard & { //<-- 

    &__row{
      border: 1px solid blue;
    }

    &__some-other-element{}

  }

}

Answer 2

Мы используем:

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

Это не идеально (селектор прародителя && был бы хорош), но это лучшее, что мы могли придумать до сих пор