将十六进制 CSS 变量与 alpha 值组合

Posted 2023-03-06

【中文标题】将十六进制 CSS 变量与 alpha 值组合

【英文标题】：Combine hexadecimal CSS Variables with alpha values

【发布时间】：2021-02-23 15:23:46

【问题描述】：

您知道将十六进制 css 变量与 alpha 值组合以创建简单的“透光效果”的任何可能性吗？

例如作为CSS变量： --my-color-red: #ff0000;

现在我们想在我们的 scss 实现中添加这个 alpha 值作为背景，下面的代码 sn-p 不起作用：

background: rgba(var(--my-color-red), 0.5);

没有 css 变量也可以工作：

background: rgba(#ff0000, 0.5);

我认为问题可能在于 sass 在编译时执行 rgba 实现，然后在运行时添加 css 变量。

你知道解决这个问题的任何方法吗？

【问题讨论】：

这能回答你的问题吗？ Sass - Converting Hex to RGBa for background opacity

很遗憾，没有。以上都是基于scss变量的解决方案。

【参考方案1】：

您可以使用将十六进制转换为 RGB 的 Sass 函数：

@function hexToRGB($hex) 
    @return red($hex), green($hex), blue($hex);

然后将另一个版本的 CSS 变量存储为 RGB：

--my-color-red: #ff0000;
--my-color-red-rgb: #hexToRGB(#ff0000);

这将为您提供 RGB 值，然后您可以将 alpha 值附加到 rgba 函数中：

rgba(var(--my-color-red-rgb), 0.5)

---

取自this文章。

【讨论】：

当然，创建另一个变量作为 css 变量是一种选择。您的第三个代码 sn-p 仅用作新的 css 变量。

这个功能对我来说很好用。这是唯一的方法。

$color: var(--my-color-red) 不是颜色。

您是否在将 CSS 变量传递给函数时遇到错误？只能传递十六进制：hexToRGB(#ff0000)

不，那么它工作正常，但我想避免多个变量。我的目标是只有一个颜色变量作为 css 变量。