Расширение заполнителя и регулярного класса

Question

У меня небольшая проблема с SASS @extend, классом-заполнителем и интерполяцией.

Я пытаюсь сохранить HTML настолько чистым, насколько это возможно, и я решил go для функции @extend в паре с классами-заполнителями. Однако я в основном расширяю классы, связанные с макетом, такие как grid, list et c - поэтому я смешиваю заполнитель с обычным классом в объявлении, то есть:

%drawer,
.drawer {
 ...
}

Все шло просто отлично, за исключением момента, когда я заметил, что интерполяция с переменной, являющейся амперсандом в основном классе, вызывает некоторые проблемы. Пример кода (с удалением большинства правил CSS):

%drawer,
.drawer {
  $this: &;

  position: fixed;
  z-index: 10;

  &__content {
    right: 0;
    transform: translate(100%, 0);
  }

  &__optional-element {
    background: red;
  }

  &--left { // I want this modifier to be applied to the parent element as it may affect more than one children element
    #{$this}__content {
      left: 0;
      transform: translate(-100%, 0);
    }
  }
}

и кода расширения:

.product-drawer {
  @extend %drawer;

  &__content {
    @extend %drawer__content;
  }
}

Однако скомпилированный вывод CSS выглядит следующим образом:

.drawer--left .product-drawer,
.drawer--left .drawer__content {
  left: 0;
  transform: translate(-100%, 0);
}

Вы можете заметить, что первая строка избыточна и фактически неверна. Кроме того, бит «& __ опциональный элемент» не выводится для расширения «product-box», что делает его действительно странным. Это происходит только с правилами с $ this интерполяцией.

Как только я удаляю обычный класс ".drawer" из исходного объявления (и просто оставляю%% там), проблема исчезает, но в этих макетах связанные с классами (.grid, .list), мы также хотим сохранить имя обычного класса, поэтому в некоторых различных простых случаях его также можно использовать без необходимости писать новый CSS и расширять его классом-заполнителем. .

Я знаю, что это можно решить, полностью отделив класс заполнителя (% pocket) от обычного (.drawer), а затем расширив класс заполнителя внутри обычного объявления ".drawer", но это просто продублировать код ... Или, возможно, мой подход неверен по дизайну?

Спасибо!

Answer 1

Проблема не в правиле @extend. Дело в том, что заполнители являются мелкой копией класса. Если вы расширяете класс, вы наследуете все его свойства, но если вы расширяете класс от заполнителя, он скопирует только первый уровень.

См. Этот пример:

%placeholder{
  content: 'placeholder';
  &__element{
    content: 'placeholder__element';
  }
}

.a{
  @extend %placeholder;
}

.class{
  content: 'class';
  &__element{
    content: 'class__element';
  }
}

.b{
  @extend .class;
}

.a {
  content: 'placeholder';
}

.class, .b {
  content: 'class';
}

.class__element {
  content: 'class__element';
}

Используя оба, вы заставляете класс-заполнитель использовать также свойства:

 %placeholder,
.class{
  content: 'class';
  &__element{
    content: 'class__element';
  }
}

.b{
  @extend %placeholder;
}

.b,
.class {
  content: 'class';
}


.class__element {
  content: 'class__element';
}