Как я могу расширить родительский стиль в sass? - PullRequest
Новая
       18

Как я могу расширить родительский стиль в sass?

0 голосов
/ 15 февраля 2019

Я хочу структурировать мои селекторы в стиле БЭМ и иметь что-то вроде: 

.card {
  color: red;

  &__button {
    display: flex;
    flex-wrap: wrap;

    &-disabled {
      @extend $;
      background: black;
    }
  }
}

И результат CSS должен быть таким: 

.card {
  color: red;
}
.card .card__button-disabled, .card .card__button {
  background: gray;
  color: red;
  font-size: 12px;
}
.card__button-disabled {
  background: black;
}

Так что я могу толькоиспользуйте имя класса «card__button-disabled» вместо «card__button card__button-disabled».

Я могу сделать это так: (и это работает) 

.card {
  color: red;

  %button {
    background: gray;
    color: red;
    font-size: 12px;
  }

  &__button {
    @extend %button;

    &-disabled {
      @extend %button;
      background: black;
    }
  }
}

Но я некак дополнительная абстракция.Я надеюсь, что есть что-то вроде: @extend parent;

...