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

Question

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

$wild-watermelon: #f55463;

使用这种颜色时，我会执行以下操作：

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

但是我有一些需要使用颜色但有点透明的东西，为此，我必须使用rgba（数字，数字，数字，0.75）。

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

我曾经读过一个命题，可以说是一个解决方案，建议我使用var函数，并且这样做：

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

当然没有用，这就是为什么我在这里。

任何帮助将不胜感激。

Answer 1

尝试：

 $wild-watermelon: #f55463;

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

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

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