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