Sass BEM модификаторы и дети - PullRequest
0 голосов
/ 28 мая 2018

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

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

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

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

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

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

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

Ответы [ 2 ]

0 голосов
/ 20 июня 2018

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

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

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

  &--standard & { //<-- 

    &__row{
      border: 1px solid blue;
    }

    &__some-other-element{}

  }

}
0 голосов
/ 16 июня 2018

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

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

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

...