徵求意見:HWB 函式

2020年10月7日釋出者:Natalie Weizenbaum

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() 永久連結

這些函式的工作方式與 HSL 顏色的 color.saturation()color.lightness() 函式相同。它們甚至適用於不是使用 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 上 完整閱讀。它將在接下來的一個月內公開徵求意見和修改,因此,如果您希望看到某些內容發生變化,請提交問題,我們可以進行討論