我正在使用 hsla 颜色模型将我的一些颜色值从 scss rgba 变量转换为 css 自定义属性。
例如
$color-navy: rgba(57, 80, 112, 1);
变成
:root {
--color-navy: hsla(214, 33%, 33%, 1);
}
我的问题是我使用 scss rgba() 函数为我的颜色添加不同程度的不透明度：
color: rgba($color-black, 0.87);
是否有与此等效的 hsla，我可以在其中传入我的自定义属性并应用 alpha？
我想要实现的示例：
hsla(var(--color-black), 0.5)
答案 0 :(得分：0)
rgba 和 hsla 都是 CSS 函数。 rgba 本身不是 SCSS 函数。
两者中的“a”代表 alpha 通道，它基本上给出了不透明度，0 或 0% 表示完全透明，1 或 100% 表示完全不透明。
以您的海军蓝为例：
rgba(57, 80, 112, 0.4) 等价于 hsla(214, 33%, 33%, 0.4)
参见示例：https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color