Breaking Change: Color Functions

Bestimmte Farbfunktionen, die mit der Annahme entwickelt wurden, dass alle Farben gegenseitig kompatibel sind, sind nun nicht mehr sinnvoll, da Sass alle Farbräume von CSS Color 4 unterstützt.

Historisch gesehen deckten alle Sass-Farbwerte denselben Farbumfang ab: Ob die Farben als RGB, HSL oder HWB definiert wurden, sie deckten nur den sRGB Farbumfang ab und konnten nur die Farben darstellen, die Monitore seit Mitte der 1990er Jahre anzeigen konnten. Als Sass seine ursprüngliche Reihe von Farbfunktionen hinzufügte, ging man davon aus, dass alle Farben frei zwischen diesen Darstellungen konvertiert werden konnten und dass für jeden Kanalnamen wie "red" oder "hue" eine einzige eindeutige Bedeutung gab.

Die Veröffentlichung von CSS Color 4 hat das geändert. Sie fügte Unterstützung für viele neue Farbräume mit anderen (breiteren) Farbumfängen als sRGB hinzu. Um diese Farben zu unterstützen, musste Sass die Funktionsweise von Farbfunktionen überdenken. Neben der Hinzufügung neuer Funktionen wie color.channel() und color.to-space() wurden eine Reihe älterer Funktionen als veraltet markiert, da sie auf Annahmen beruhten, die nicht mehr zutrafen .

Alte Kanal-FunktionenAlte Kanal-Funktionen Permalink

Kanalnamen sind nun farbraumübergreifend mehrdeutig. Der Legacy-RGB-Raum hat einen red-Kanal, aber auch display-p3, rec2020 und viele mehr. Das bedeutet, dass color.red(), color.green(), color.blue(), color.hue(), color.saturation(), color.lightness(), color.whiteness(), color.blackness(), color.alpha() und color.opacity() entfernt werden. Stattdessen können Sie die Funktion color.channel() verwenden, um den Wert eines bestimmten Kanals zu erhalten, normalerweise mit einem expliziten $space-Argument, um anzugeben, mit welchem Farbraum Sie arbeiten .

  SCSS

  Sass

       SpielplatzSCSS-Syntax@use "sass:color";

$color: #c71585;
@debug color.channel($color, "red", $space: rgb);
@debug color.channel($color, "red", $space: display-p3);
@debug color.channel($color, "hue", $space: oklch);

       SpielplatzSass-Syntax@use "sass:color"

$color: #c71585
@debug color.channel($color, "red", $space: rgb)
@debug color.channel($color, "red", $space: display-p3)
@debug color.channel($color, "hue", $space: oklch)

EinzalkanalkorrekturfunktionenEinzalkanalkorrekturfunktionen Permalink

Diese haben das gleiche Mehrdeutigkeitsproblem wie die alten Kanal-Funktionen, während sie *auch* bereits redundant mit color.adjust() waren, noch bevor die Unterstützung für Color 4 hinzugefügt wurde. Darüber hinaus ist es oft besser, color.scale() zu verwenden, da es besser geeignet ist, Änderungen relativ zur vorhandenen Farbe vorzunehmen, anstatt in absoluten Begriffen. Das bedeutet, dass adjust-hue(), saturate(), desaturate(), lighten(), darken(), opacify(), fade-in(), transparentize() und fade-out() entfernt werden. Beachten Sie, dass diese Funktionen nie Modul-seitige Gegenstücke hatten, da ihre Verwendung bereits entmutigt wurde.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@use "sass:color";

$color: #c71585;
@debug color.adjust($color, $lightness: 15%, $space: hsl);
@debug color.adjust($color, $lightness: 15%, $space: oklch);
@debug color.scale($color, $lightness: 15%, $space: oklch);

       SpielplatzSass-Syntax@use "sass:color"

$color: #c71585
@debug color.adjust($color, $lightness: 15%, $space: hsl)
@debug color.adjust($color, $lightness: 15%, $space: oklch)
@debug color.scale($color, $lightness: 15%, $space: oklch)

ÜbergangszeitraumÜbergangszeitraum Permalink

Dart Sass: seit 1.79.0
LibSass: ✗
Ruby Sass: ✗

Zuerst geben wir Deprecation-Warnungen für alle Verwendungen der Funktionen aus, die entfernt werden sollen. In Dart Sass 2.0.0 werden diese Funktionen vollständig entfernt. Versuche, die Modul-seitigen Versionen aufzurufen, lösen einen Fehler aus, während die globalen Funktionen als einfache CSS-Funktionen behandelt und als einfache Strings ausgegeben werden.

Sie können den Sass-Migrator verwenden, um automatisch von den veralteten APIs zu ihren neuen Ersatzfunktionen zu migrieren.

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.