Farben

Kompatibilität (Farbräume)

Dart Sass

seit 1.79.0

LibSass

✗

Ruby Sass

✗

➤

Kompatibilität (Syntax Level 4)

Dart Sass

seit 1.14.0

LibSass

✗

Ruby Sass

seit 3.6.0

➤

Sass verfügt über integrierte Unterstützung für Farbwerte. Genau wie bei CSS-Farben stellt jede Farbe einen Punkt in einem bestimmten Farbraum dar, z. B. rgb oder lab. Sass-Farben können als Hex-Codes (#f2ece4 oder #b37399aa), CSS-Farbnamen (midnightblue, transparent) oder als Farbfunktionen wie rgb(), lab() oder color() geschrieben werden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@debug #f2ece4; // #f2ece4
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // #191970
@debug rgb(204 102 153); // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7); // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576); // color(display-p3 0.597 0.732 0.576)

Spielplatz

Sass-Syntax

@debug #f2ece4  // #f2ece4
@debug #b37399aa  // rgba(179, 115, 153, 67%)
@debug midnightblue  // #191970
@debug rgb(204 102 153)  // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7)  // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576)  // color(display-p3 0.597 0.732 0.576)

FarbräumeFarbräume Permalink

Sass unterstützt die gleiche Menge an Farbräumen wie CSS. Eine Sass-Farbe wird immer in dem Farbraum ausgegeben, in dem sie geschrieben wurde, es sei denn, sie befindet sich in einem Legacy-Farbraum oder Sie konvertieren sie mit color.to-space() in einen anderen Raum. Alle anderen Farb-Funktionen in Sass geben immer eine Farbe im selben Raum wie die ursprüngliche Farbe zurück, auch wenn die Funktion Änderungen an dieser Farbe in einem anderen Raum vorgenommen hat.

Obwohl jeder Farbraum Grenzen für die Gamut hat, die er für seine Kanäle erwartet, kann Sass Werte außerhalb der Gamut für jeden Farbraum darstellen. Dies ermöglicht die sichere Konvertierung einer Farbe aus einem Weitgamut-Raum in einen Enggamut-Raum und zurück, ohne Informationen zu verlieren .

Im Folgenden finden Sie eine vollständige Liste aller von Sass unterstützten Farbräume. Auf MDN können Sie mehr über diese Räume erfahren.

Mit * markierte Räume sind Legacy-Farbräume.

Fehlende KanäleFehlende Kanäle Permalink

Farben in CSS und Sass können "fehlende Kanäle" haben, die als none geschrieben werden und einen Kanal darstellen, dessen Wert unbekannt ist oder die Art und Weise, wie die Farbe gerendert wird, nicht beeinflusst. Sie könnten zum Beispiel hsl(none 0% 50%) schreiben, weil der Farbton keine Rolle spielt, wenn die Sättigung 0% beträgt. In den meisten Fällen werden fehlende Kanäle einfach als 0-Werte behandelt, aber sie tauchen gelegentlich auf.

• Wenn Sie Farben mischen, entweder als Teil der CSS-Interpolation für etwas wie eine Animation oder mit der Funktion color.mix() von Sass, nehmen fehlende Kanäle immer den Wert des anderen Farbkanals für diesen Kanal an, wenn möglich.

• Wenn Sie eine Farbe mit einem fehlenden Kanal in einen anderen Raum konvertieren, der einen analogen Kanal hat, wird dieser Kanal nach Abschluss der Konvertierung auf none gesetzt.

Obwohl color.channel() 0 für fehlende Kanäle zurückgibt, können Sie diese immer mit color.is-missing() überprüfen.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

$grey: hsl(none 0% 50%);

@debug color.mix($grey, blue, $method: hsl); // hsl(240, 50%, 50%)
@debug color.to-space($grey, lch); // lch(53.3889647411% 0 none)

Spielplatz

Sass-Syntax

@use 'sass:color'

$grey: hsl(none 0% 50%)

@debug color.mix($grey, blue, $method: hsl)  // hsl(240, 50%, 50%)
@debug color.to-space($grey, lch)  // lch(53.3889647411% 0 none)

Leistungslose KanäleLeistungslose Kanäle Permalink

Ein Farbkanal gilt unter bestimmten Umständen als "leistungslose", wenn sein Wert die Art und Weise, wie die Farbe auf dem Bildschirm gerendert wird, nicht beeinflusst. Die CSS-Spezifikation verlangt, dass bei der Konvertierung einer Farbe in einen neuen Raum alle leistungslosen Kanäle durch none ersetzt werden. Sass tut dies in allen Fällen mit Ausnahme von Konvertierungen in Legacy-Räume, um sicherzustellen, dass die Konvertierung in einen Legacy-Raum immer eine Farbe erzeugt, die mit älteren Browsern kompatibel ist.

Weitere Details zu leistungslosen Kanälen finden Sie unter color.is-powerless().

Legacy-FarbräumeLegacy-Farbräume  Permalink

Historisch gesehen unterstützten CSS und Sass nur die Standard-Gamut von RGB und nur die Funktionen rgb, hsl und hwb zur Definition von Farben. Da zu dieser Zeit alle Farben die gleiche Gamut verwendeten, funktionierte jede Farb-Funktion mit jeder Farbe unabhängig von ihrem Farbraum. Sass behält dieses Verhalten bei, aber nur für ältere Funktionen und nur für Farben in diesen drei "Legacy"-Farbräumen. Dennoch ist es immer noch eine gute Praxis, den $space, mit dem Sie arbeiten möchten, explizit anzugeben, wenn Sie Farb-Funktionen verwenden.

Sass konvertiert auch frei zwischen verschiedenen Legacy-Farbräumen, wenn Legacy-Farbwerte in CSS konvertiert werden. Dies ist immer sicher, da sie alle das gleiche zugrunde liegende Farbmodell verwenden, und dies hilft sicherzustellen, dass Sass Farben in einem möglichst kompatiblen Format ausgibt.

Farb-FunktionenFarb-Funktionen Permalink

Sass unterstützt viele nützliche Farb-Funktionen, die verwendet werden können, um neue Farben basierend auf vorhandenen zu erstellen, indem Farben gemischt werden oder ihre Kanalwerte skaliert werden. Beim Aufrufen von Farb-Funktionen sollten Farbräume immer als unquoted strings geschrieben werden, um mit CSS übereinzustimmen, während Kanalnamen als quoted strings geschrieben werden sollten, damit Kanäle wie "red" nicht als Farbwerte geparst werden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

$venus: #998099;

@debug color.scale($venus, $lightness: +15%, $space: oklch);
// rgb(170.1523703626, 144.612080603, 170.1172627174)
@debug color.mix($venus, midnightblue, $method: oklch);
// rgb(95.9363315581, 74.5687109346, 133.2082569526)

Spielplatz

Sass-Syntax

@use 'sass:color'

$venus: #998099

@debug color.scale($venus, $lightness: +15%, $space: oklch)
// rgb(170.1523703626, 144.612080603, 170.1172627174)
@debug color.mix($venus, midnightblue, $method: oklch)
// rgb(95.9363315581, 74.5687109346, 133.2082569526)