征求意见: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 上 完整阅读。它将在接下来的一个月内公开征求意见和修改,因此,如果您希望看到某些内容发生变化,请提交问题,我们可以进行讨论