意見徵求: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 上完整閱讀。它在未來一個月開放評論和修改,因此如果你希望看到一些變更,請 提交問題,我們可以討論 它!