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

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;
}