Критическое изменение: Расширение составных селекторов

LibSass в настоящее время позволяет расширять составные селекторы, такие как .message.info, но способ его расширения не соответствует тому, как должен работать @extend.

Совместимость:
Dart Sass
LibSass
Ruby Sass

Когда один селектор расширяет другой, Sass стилизует все элементы, которые соответствуют расширителю, как если бы они также соответствуют расширяемому классу. Другими словами, если вы напишете .heads-up {@extend .info}, это будет работать так же, как вы заменили class="heads-up" в вашем HTML на class="heads-up info".

Следуя этой логике, можно ожидать, что .heads-up {@extend .message.info} будет работать как замена class="heads-up" на class="heads-up info message". Но сейчас в LibSass и Ruby Sass это работает не так - вместо добавления .heads-up к каждому селектору, имеющему или .info, или .message, он добавляет его только к селекторам, имеющим вместе .info.message.

SCSS Syntax

// Оба они должны быть расширены, но этого не произойдет.
.message {
  border: 1px solid black;
}
.info {
  font-size: 1.5rem;
}

.heads-up {
  @extend .message.info;
}

Sass Syntax

// Оба они должны быть расширены, но этого не произойдет.
.message
  border: 1px solid black

.info
  font-size: 1.5rem


.heads-up
  @extend .message.info

Чтобы решить эту проблему, избегайте путаницы и сохраняйте чистоту и эффективность реализации. Возможность расширения составных селекторов не поддерживается в Dart Sass и будет удалена в будущей версии LibSass. Для совместимости пользователи должны расширять каждый простой селектор отдельно:

SCSS Syntax

.message {
  border: 1px solid black;
}
.info {
  font-size: 1.5rem;
}

.heads-up {
  @extend .message, .info;
}

Sass Syntax

.message
  border: 1px solid black

.info
  font-size: 1.5rem


.heads-up
  @extend .message, .info

CSS Output

.message, .heads-up {
  border: 1px solid black;
}

.info, .heads-up {
  font-size: 1.5rem;
}



⚠️ Внимание!

Поскольку Sass не знает деталей HTML, который будет стилизован CSS, любой @extend может потребовать создания дополнительных селекторов, которые не будут применяться, в частности, к вашему HTML. Это особенно верно при отказе от расширенных составных селекторов.

В большинстве случаев эти дополнительные селекторы не вызовут никаких проблем и добавят только пару дополнительных байтов в сжатый CSS. Но некоторые таблицы стилей могут больше полагаться на старое поведение. В этом случае мы рекомендуем заменить составной селектор на селектор-заполнитель.

SCSS Syntax

// Instead of just `.message.info`.
%message-info, .message.info {
  border: 1px solid black;
  font-size: 1.5rem;
}

.heads-up {
  // Instead of `.message.info`.
  @extend %message-info;
}

Sass Syntax

// Instead of just `.message.info`.
%message-info, .message.info
  border: 1px solid black
  font-size: 1.5rem


.heads-up
  // Instead of `.message.info`.
  @extend %message-info

CSS Output

.heads-up, .message.info {
  border: 1px solid black;
  font-size: 1.5rem;
}