如何将不透明度应用于CSS颜色变量?

您所在的位置:网站首页 rgb颜色透明度 如何将不透明度应用于CSS颜色变量?

如何将不透明度应用于CSS颜色变量?

2023-08-07 23:43| 来源: 网络整理| 查看: 265

我知道OP没有使用预处理器,但如果以下信息是这里答案的一部分,我会得到帮助(我还不能评论,否则我会评论@BoltClock answer。

如果您使用的是scss,则上面的答案将失败,因为scss尝试使用特定于scss的rgba()/hsla()函数编译样式,该函数需要4个参数。但是,rgba()/hsla()也是原生css函数,因此可以使用字符串插值来绕过scss函数。

示例(在sass 3.5.0+中有效):

:root { --color_rgb: 250, 250, 250; --color_hsl: 250, 50%, 50%; } div { /* This is valid CSS, but will fail in a scss compilation */ background-color: rgba(var(--color_rgb), 0.5); /* This is valid scss, and will generate the CSS above */ background-color: #{'rgba(var(--color_rgb), 0.5)'}; }

请注意,字符串插值将不适用于非CSS scss函数,例如lighten(),因为生成的代码将不是函数式CSS。但是,它仍然是有效的scss,因此在编译过程中不会收到任何错误。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3