如何仅使用 CSS 将颜色十六进制代码更改为 rgba？答案

【问题标题】：How Can I change color hex code to rgba using only CSS?如何仅使用 CSS 将颜色十六进制代码更改为 rgba？
【发布时间】：2019-10-11 18:46:01
【问题描述】：

我有一个小问题可能会给我带来问题，我有一个项目，我使用 SASS 将变量设置为颜色，这是我的 SASS 文件 __colors.scss：

$wild-watermelon: #f55463;

当我使用这种颜色时，我会做这样的事情：

.container {
    background-color: $wild-watermelon;
}

但我有一些东西需要使用颜色但有点透明，为此，我必须使用 rgba(number, number, number, 0.75)。

但我认为这个解决方案并不合适，因为如果我想更改主题颜色，我必须手动更改多个文件，而不仅仅是更改全局变量。

我读过一个命题，比如说一个解决方案，建议我使用 var 函数，我做这样的事情：

 .container {
     background-color: rgba(var($wild-watermelon),0.75);
 }

当然没用，这就是我在这里的原因。

任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

试试：

 $wild-watermelon: #f55463;

 .container {
   background-color: rgba($wild-watermelon, 0.75 );
 }

如果要更改颜色，只需更改变量的十六进制代码即可。

我建议选择一个更通用的名称（例如 $color-primary），以防万一您将来更改项目的配色方案，因此您不必也更改变量名称。这种方式更易于维护。

【讨论】：