Breaking Change: Slash als Division

Sass behandelt / derzeit in einigen Kontexten als Divisionsoperation und in anderen als Trennzeichen. Dies macht es für Sass-Benutzer schwierig zu erkennen, was ein bestimmtes / bedeuten wird, und erschwert die Arbeit mit neuen CSS-Funktionen, die / als Trennzeichen verwenden.

Dart Sass: teilweise
LibSass: ✗
Ruby Sass: ✗

Heute verwendet Sass komplexe Heuristiken, um herauszufinden, ob ein / als Division oder als Trennzeichen behandelt werden soll. Selbst dann erzeugt es als Trennzeichen nur eine ungequotete Zeichenkette, die aus Sass heraus schwer zu inspizieren ist. Da immer mehr CSS-Funktionen wie CSS Grid und die neue rgb() und hsl() Syntax / als Trennzeichen verwenden, wird dies für Sass Benutzer immer schmerzhafter.

Da Sass eine CSS-Obermenge ist, passen wir die Syntax von CSS an, indem wir / als *nur* Trennzeichen neu definieren. / wird als neuer Listentrennertyp behandelt, ähnlich wie , heute funktioniert. Division wird stattdessen mit der neuen Funktion math.div() geschrieben. Diese Funktion verhält sich genau wie / heute.

Diese Deprecation hat keine Auswirkungen auf die Verwendung von / innerhalb von calc()-Ausdrücken.

  SCSS

  Sass

  CSS

       SpielplatzSCSS-Syntax@use "sass:math";

// Future Sass, doesn't work yet!
.item3 {
  $row: span math.div(6, 2) / 7; // A two-element slash-separated list.
  grid-row: $row;
}

       SpielplatzSass-Syntax@use "sass:math"

// Future Sass, doesn't work yet!
.item3
  $row: span math.div(6, 2) / 7 // A two-element slash-separated list.
  grid-row: $row

CSS-Ausgabe.item3 {
  grid-row: span 3 / 7;
}

ÜbergangszeitraumÜbergangszeitraum Permalink

Dart Sass: seit 1.33.0
LibSass: ✗
Ruby Sass: ✗

Um den Übergang zu erleichtern, haben wir mit der Hinzufügung der Funktion math.div() begonnen. Der Operator / führt vorerst weiterhin Divisionen durch, gibt aber auch eine Deprecation-Warnung aus, wenn er dies tut. Benutzer sollten alle Divisionen auf die Verwendung von math.div() umstellen.

💡 Lustige Tatsache

Denken Sie daran, dass Sie Deprecation-Warnungen von Bibliotheken, die Sie nicht kontrollieren, unterdrücken können! Wenn Sie die Befehlszeilenschnittstelle verwenden, können Sie das Flag --quiet-deps übergeben, und wenn Sie die JavaScriptAPI verwenden, können Sie die Option quietDeps auf true setzen.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@use "sass:math";

// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3

// RIGHT, will work in future Sass versions.
@debug math.div(12px, 4px); // 3

       SpielplatzSass-Syntax@use "sass:math"

// WRONG, will not work in future Sass versions.
@debug (12px/4px) // 3

// RIGHT, will work in future Sass versions.
@debug math.div(12px, 4px) // 3

Slash-getrennte Listen werden während der Übergangszeit ebenfalls verfügbar sein. Da sie noch nicht mit / erstellt werden können, wird die Funktion list.slash() hinzugefügt, um sie zu erstellen. Sie können auch "slash" als $separator an die Funktionen list.join() und list.append() übergeben.

  SCSS

  Sass

  CSS

       SpielplatzSCSS-Syntax@use "sass:list";
@use "sass:math";

.item3 {
  $row: list.slash(span math.div(6, 2), 7);
  grid-row: $row;
}

       SpielplatzSass-Syntax@use "sass:list"
@use "sass:math"

.item3
  $row: list.slash(span math.div(6, 2), 7)
  grid-row: $row

CSS-Ausgabe.item3 {
  grid-row: span 3 / 7;
}

Dart Sass: seit 1.40.0
LibSass: ✗
Ruby Sass: ✗

Alternativ können Benutzer Divisionsoperationen in einen calc()-Ausdruck einschließen, den Sass zu einer einzigen Zahl vereinfacht.

  SCSS

  Sass

       SpielplatzSCSS-Syntax// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3

// RIGHT, will work in future Sass versions.
@debug calc(12px / 4px); // 3

       SpielplatzSass-Syntax// WRONG, will not work in future Sass versions.
@debug (12px/4px) // 3

// RIGHT, will work in future Sass versions.
@debug calc(12px / 4px) // 3

Automatische MigrationAutomatische Migration Permalink

Sie können den Sass-Migrator verwenden, um Ihre Stylesheets automatisch zu aktualisieren und math.div() und list.slash() zu verwenden.

$ npm install -g sass-migrator
$ sass-migrator division **/*.scss

Kann ich die Warnungen unterdrücken?

Sass bietet eine leistungsstarke Reihe von Optionen zur Verwaltung, welche Deprecations-Warnungen Sie wann sehen.

Terse- und Verbose-Modus

Standardmäßig läuft Sass im Terse-Modus, in dem jede Art von Deprecations-Warnung nur fünfmal ausgegeben wird, bevor weitere Warnungen unterdrückt werden. Dies stellt sicher, dass die Benutzer wissen, wann sie sich einer bevorstehenden Breaking Change bewusst sein müssen, ohne eine überwältigende Menge an Konsolenrauschen zu erzeugen.

Wenn Sie stattdessen Sass im Verbose-Modus ausführen, wird jede Deprecations-Warnung ausgegeben. Dies kann nützlich sein, um die verbleibende Arbeit bei der Behebung von Deprecations zu verfolgen. Sie können den Verbose-Modus mit dem Flag --verbose in der Befehlszeile oder der Option verbose in der JavaScript API aktivieren.

⚠️ Vorsicht!

Wenn Sass über die JS API ausgeführt wird, teilt Sass keine Informationen über Kompilierungen hinweg. Daher werden standardmäßig fünf Warnungen für *jedes kompilierte Stylesheet* ausgegeben. Sie können dies jedoch beheben, indem Sie einen benutzerdefinierten Logger schreiben (oder den Autor Ihres bevorzugten Frameworks dazu auffordern, dies zu tun), der nur fünf Fehler pro Deprecation ausgibt und über mehrere Kompilierungen hinweg geteilt werden kann.

Deprecations in Abhängigkeiten unterdrücken

Manchmal haben Ihre Abhängigkeiten Deprecations-Warnungen, auf die Sie keinen Einfluss haben. Sie können Deprecations-Warnungen von Abhängigkeiten unterdrücken, während sie für Ihre Anwendung weiterhin ausgegeben werden, indem Sie das Flag --quiet-deps in der Befehlszeile oder die Option quietDeps in der JavaScript API verwenden.

Für die Zwecke dieses Flags ist eine "Abhängigkeit" jedes Stylesheet, das keine reine Serie relativer Ladevorgänge vom Einstiegs-Stylesheet ist. Das bedeutet alles, was von einem Lade-Pfad kommt, und die meisten Stylesheets, die über benutzerdefinierte Importer geladen werden.

Spezifische Deprecations unterdrücken

Wenn Sie wissen, dass eine bestimmte Deprecation für Sie kein Problem darstellt, können Sie Warnungen für diese spezifische Deprecation unterdrücken, indem Sie das Flag --silence-deprecation in der Befehlszeile oder die Option silenceDeprecations in der JavaScript API verwenden.