объединить @extend с родительским стилем и создать одно имя класса - PullRequest
Новая
       33

объединить @extend с родительским стилем и создать одно имя класса

0 голосов
/ 14 марта 2019

Я пытаюсь объединить стиль в один класс, но он показывает ошибку.Посмотрите на приведенный ниже пример. 

%banner-style{
  banner {
    padding: 140px 0 210px;
    background: url(https://im2.ezgif.com/tmp/ezgif-2-92c6382d82ba.jpg) top center/cover no-repeat;
    &.row {
        margin: 0;
    }
    .main-heading {
        font-size: 40px;
        letter-spacing: -1px;
        font-weight: 600;
        padding-right: 20px;
        sup {
            font-size: 10px;
            vertical-align: super;
        }
    }
  }
}

И я хочу, чтобы он сливался с родительским классом .parent

.parent{
  color: red;
  &_@extend %banner-style;
}

, используя & для объединения в одно имя класса.но показывая ошибку, если я не сделаю это 

.parent{
      color: red;
      &_{@extend %banner-style};
    }

То же самое, как если бы я удалил &_.

Я хотел .parent_banner {...}, но вместо этого получил .parent_ banner{...};

Кто-нибудь знает, как мне это сделать?

1 Ответ

1 голос
/ 14 марта 2019

Вы получаете именно то, что должно произойти.Extend не «объединяет» классы, он расширяет другой класс / заполнитель в стили нового селектора.

Это означает, что если я напишу: 

%banner-style {
  background: black;
}

.parent { 
  @extend %banner-style;
}
.other-selector { 
  @extend %banner-style;
  color: red;
}

Полученный код будет 

.parent {
  background: black;
}
.other-selector {
  color: red;
  background: black;
}

Итак, вы получаете ожидаемые результаты.Если вы хотите, чтобы это «работало» так, как вы хотите, вы можете просто изменить свой код на: 

%banner-style {
    padding: 140px 0 210px;
    background: url(https://im2.ezgif.com/tmp/ezgif-2-92c6382d82ba.jpg) top center/cover no-repeat;
    &.row {
        margin: 0;
    }
    .main-heading {
        font-size: 40px;
        letter-spacing: -1px;
        font-weight: 600;
        padding-right: 20px;
        sup {
            font-size: 10px;
            vertical-align: super;
        }
    }
}

.parent{
  color: red;

  &_banner {
    @extend %banner-style;
  };
}

Примечание: я вынул блок banner, потому что, кажется, вы этого не делаетехотите (и баннер не является обычным HTML-элементом).

...