Vorschlag zur Diskussion: HWB Funktionen

Die CSS-Arbeitsgruppe hat in letzter Zeit allerlei spannende Dinge in der Color Level 4-Spezifikation gemacht, und das Sass-Team beginnt darüber nachzudenken, wie diese coolen neuen Features in das Farbmodell von Sass integriert werden können. Wir brauchen mehr Zeit, um die exakt richtigen Designs für komplexe Features wie den Lab-Farbraum zu erarbeiten, aber das bedeutet nicht, dass wir nicht ein paar neue Farbfunktionen hinzufügen können.

Heute kündigen wir einen Vorschlag für ein solches Feature an: eingebaute Sass-Funktionen für HWB-Farben! Sobald dieser Vorschlag (erstellt von Miriam Suzanne, Mitglied des Sass-Kernteams Miriam Suzanne) angenommen und implementiert ist, können Sie Farben in HWB-Syntax schreiben und deren Weiß- und Schwarzanteil genauso anpassen, wie Sie heute die Sättigung und Helligkeit einer Farbe anpassen können.

Die FunktionenDie Funktionen Permalink

Hier sind die neuen und verbesserten Funktionen, die dieser Vorschlag hinzufügt

color.hwb()color.hwb() Permalink

Die Funktion color.hwb() definiert eine Farbe anhand ihres Farbtons, Weißanteils und Schwarzanteils. Wie die bestehenden Funktionen rgb() und hsl() kann sie entweder die in der Spezifikation definierte leerzeichengetrennte Syntax (hwb(270 20% 40%)) oder die Sass-typischere kommagetrennte Syntax (hwb(270, 20%, 40%)) verwenden. Da HWB-Farben denselben sRGB-Farbraum wie alle anderen Sass-Farbwerte verwenden, sind auf diese Weise erstellte Farben vollständig mit allen bestehenden Sass-Farbfunktionen kompatibel und werden als ihre RGB-Äquivalente ausgegeben, um maximale Browserkompatibilität zu gewährleisten.

Beachten Sie, dass im Gegensatz zu rgb() und hsl() der Vorschlag diese Funktion noch nicht in den globalen Geltungsbereich aufnimmt. Dies liegt daran, dass Sass die Richtlinie verfolgt, niemals Unterstützung für neue CSS-Syntax hinzuzufügen, bevor sie nicht von mindestens einem Browser implementiert wurde. Spezifikationen neigen dazu, sich zu ändern, bis sie von Browsern fixiert werden, und wenn Sass am Ende etwas unterstützt, das sich von den Browsern selbst unterscheidet, ist das eine schlechte Nachricht!

color.whiteness() und color.blackness()color.whiteness() und color.blackness() Permalink

Diese Funktionen funktionieren wie die Funktionen color.saturation() und color.lightness() für HSL-Farben. Sie funktionieren sogar für Farben, die nicht mit color.hwb() erstellt wurden, sodass Sie sie verwenden können, um zu überprüfen, wie blass oder dunkel eine beliebige Farbe ist.

Da HWB-Farben dieselbe Vorstellung von "Farbton" haben wie HSL-Farben, funktioniert die bestehende Funktion color.hue() bereits perfekt!

color.scale(), color.adjust() und color.change()color.scale(), color.adjust() und color.change() Permalink

Alle drei Farbmodifikationsfunktionen unterstützen nun die Argumente $whiteness und $blackness. Wenn Sie möchten, dass eine Farbe (wiederum unabhängig davon, wie sie erstellt wurde) 20% weißer wird, übergeben Sie sie einfach an color.scale($color, $whiteness: 20%) und fertig! 

Lassen Sie uns wissen, was Sie denken!Lassen Sie uns wissen, was Sie denken! Permalink

Wenn Sie mehr über diesen Vorschlag erfahren möchten, lesen Sie ihn vollständig auf GitHub. Er ist den nächsten Monat für Kommentare und Überarbeitungen offen. Wenn Sie also möchten, dass sich etwas ändert, erstellen Sie bitte ein Issue, und wir können es besprechen!