Селектор правил SASS/SCSS @extend

У меня небольшая проблема с правилом @extend, вот что я получил (сфокусируйтесь на h1):

.content-header {
    // CSS properties
    h1 {
        // CSS properties
    }
}

.box-header {
    // CSS properties
    h1 {
        @extend .content-header h1; // My selector problem!
        // And his own CSS properties
    }
}

Итак, это будет:

.content-header h1, .box-header h1 {
    /* Happily sharing the same CSS properties */
}

Но похоже, что @extend не нравится, это любой другой способ записать это, не давая h1 a class??

Ответ 1

Вложенные селекторы не могут быть расширены - на самом деле это синтаксическая ошибка, о которой сообщает синтаксический анализатор. Структурные комментарии в сторону (я не могу придумать сценарий, где указанная связь @extend оправдана), это не то, что может быть выполнено в настоящее время с помощью SASS.

NB: это поддерживается, однако, Stylus, если вы открыты для него.

Ответ 2

Очевидное решение, которое должно было бы определить новый @mixin your-name для ваших .content-header h1 определений и @include your-name внутри .box-header h1.

Но есть гораздо лучшее решение Ссылка на родительские селектора: &:

h1 {
    .content-header &,
    .box-header & {
        // CSS properties
    }
    .box-header & {
        // And his own CSS properties
    }
}

Это не очевидно, потому что логика обратная, но лучше ее поддерживать. Вы изменяете определения h1 для конкретного селектора.

Ответ 3

Вложенная @extend не разрешена. Попробуйте это для работы вокруг

.foo {
  background-color: lime;    
}
.b{
  margin:0px;
}
.baz {
  @extend .foo;
  @extend .b;
}

Некоторая вещь, которую я построил для использования моим персоналом ниже, чтобы делиться со всеми вами. Это динамически создает селектор. Поскольку специальные символы не допускаются в соглашениях об именах, я использовал "-" для разделения класса

$ih-classes: ( "module--cardContainer--header",
                "a"
              );
  %module--cardContainer--header {
    color: #1e1d1c;
    background-color: #fff;
    border-bottom: 0.0714rem solid #e0dddc;
    padding: 0;
    line-height: 3.1429rem;
    font-size: 1.2857rem;
    font-family: ProximaNovaSemiBold;
}
%a{
  color:red;
}

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}
@mixin generate-framework-code() {

              @each  $icon in $ih-classes {
               $val : str-replace($icon, '--', ' .');
                  .#{$val} {
                            @extend %#{$icon};
                         }
                  }
}

@include generate-framework-code();

Удачи!!