意見徵求:HWB 函數

Natalie Weizenbaum 於 2020 年 10 月 7 日發布

CSS 工作小組最近在 色彩等級 4 規格中進行了各種令人興奮的事情,而 Sass 團隊也開始思考如何將這些酷炫的新功能整合到 Sass 的色彩模型中。我們需要更多時間來敲定像 Lab 色彩空間等複雜功能的精確設計,但这並不表示我們無法新增一些新的色彩 好物。

今天我們宣布一項此類功能的提案:HWB 色彩的內建 Sass 函數!一旦接受並實作此提案(由 Sass 核心團隊成員 Miriam Suzanne 起草),您就能以 HWB 語法撰寫色彩,並調整其白度和黑度,就像您今天可以調整色彩的飽和度和亮度 一樣。

函數函數永久連結

以下是此提案 新增和改進的函數

color.hwb()color.hwb() 永久連結

color.hwb() 函數使用色相、白度和黑度來定義顏色。如同現有的 rgb()hsl() 函數,它可以使用 規格 中定義的空白分隔語法 (hwb(270 20% 40%)) 或更像 Sass 的逗號分隔語法 (hwb(270, 20%, 40%))。由於 HWB 顏色使用與所有其他 Sass 顏色值相同的 sRGB 色彩空間,因此以這種方式建立的顏色與所有現有的 Sass 顏色函數完全相容,並會以其 RGB 等效值發射,以達到最高的瀏覽器 相容性。

請注意, rgb()hsl() 不同,提案尚未將此函數新增至全域範圍。這是因為 Sass 有一項政策,在至少有一個瀏覽器實作之前,絕不新增對新的 CSS 語法的支援。規格在瀏覽器鎖定之前可能會變更,如果 Sass 最後支援與瀏覽器本身不同的內容,那可就糟 了!

color.whiteness()color.blackness()color.whiteness() 和 color.blackness() 永久連結

這些函數的作用類似於 color.saturation()color.lightness() 函數對 HSL 顏色的作用。它們甚至適用於並非使用 color.hwb() 建立的顏色,因此您可以使用它們來檢查任何顏色的明度或暗度 

由於 HWB 顏色與 HSL 顏色具有相同的「色相」概念,因此現有的 color.hue() 函數已經可以完美運作 了!

color.scale()color.adjust()color.change()color.scale()、color.adjust() 和 color.change() 永久連結

現在,所有三種色彩修改函式都支援 $whiteness$blackness 參數。如果你想要一個顏色(再次強調,不論它是如何建立的)白 20%,只要將它傳遞給 color.scale($color, $whiteness: 20%),這樣就完成了!

讓我們知道你的想法!讓我們知道你的想法! 永久連結

如果你有興趣進一步瞭解此提案,請在 GitHub 上完整閱讀。它在未來一個月開放評論和修改,因此如果你希望看到一些變更,請 提交問題,我們可以討論 它!