Breaking Change: Erweiterung zusammengesetzter Selektoren

LibSass erlaubt derzeit die Erweiterung zusammengesetzter Selektoren wie .message.info, aber die Art und Weise, wie sie erweitert wurden, stimmt nicht mit der Funktionsweise von @extend überein.

Kompatibilität
Dart Sass
✓
LibSass
✗
Ruby Sass
✗

Wenn ein Selektor einen anderen erweitert, formatiert Sass alle Elemente, die dem Erweiterer entsprechen, so, als ob sie auch die erweiterte Klasse entsprechen würden. Mit anderen Worten, wenn Sie .heads-up {@extend .info} schreiben, funktioniert es genauso, als ob Sie class="heads-up" in Ihrem HTML durch class="heads-up info" ersetzt hätten.

Nach dieser Logik würden Sie erwarten, dass .heads-up {@extend .message.info} so funktioniert, als ob Sie class="heads-up" durch class="heads-up info message" ersetzt hätten. Aber so funktioniert es derzeit in LibSass und Ruby Sass nicht – anstatt .heads-up zu jedem Selektor hinzuzufügen, der *entweder .info oder .message* hat, fügt es ihn nur zu Selektoren hinzu, die *.info.message zusammen* haben.

Spielplatz

SCSS-Syntax

// These should both be extended, but they won't be.
.message {
  border: 1px solid black;
}
.info {
  font-size: 1.5rem;
}

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

Sass-Syntax

// These should both be extended, but they won't be.
.message
  border: 1px solid black

.info
  font-size: 1.5rem


.heads-up
  @extend .message.info

Um dieses Problem zu beheben, weitere Verwirrung zu vermeiden und die Implementierung sauber und effizient zu halten, wird die Möglichkeit, zusammengesetzte Selektoren zu erweitern, in Dart Sass nicht unterstützt und wird in einer zukünftigen Version von LibSass entfernt. Zur Kompatibilität sollten Benutzer stattdessen jeden einfachen Selektor separat erweitern .

Spielplatz

SCSS-Syntax

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

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

Sass-Syntax

.message
  border: 1px solid black

.info
  font-size: 1.5rem


.heads-up
  @extend .message, .info

CSS-Ausgabe

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

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

⚠️ Vorsicht!

Da Sass die Details des HTML, das die CSS formatieren soll, nicht kennt, muss jede @extend möglicherweise zusätzliche Selektoren generieren, die auf Ihr HTML nicht zutreffen. Dies gilt insbesondere beim Wechsel von der Erweiterung zusammengesetzter Selektoren.

Meistens verursachen diese zusätzlichen Selektoren keine Probleme und fügen nur ein paar zusätzliche Bytes zu komprimiertem CSS hinzu. Einige Stylesheets verlassen sich jedoch möglicherweise stärker auf das alte Verhalten. In diesem Fall empfehlen wir, den zusammengesetzten Selektor durch einen Platzhalterselektor  zu ersetzen.

Spielplatz

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

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-Ausgabe

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