在 CSS 变量上下文中使用 SASS rgba 函数？

Question

我们如何让 SASS rgba 将 rgba(#4caf50, 0.1) 转换为 rgba(76, 175, 80, 0.1)当上下文是 CSS 变量声明的值侧时？

为了清楚起见，这里有一个例子：

$green: #4caf50;

$green-rgba: rgba($green, 0.1);
@debug $green-rgba; // rgba(76, 175, 80, 0.1)

@debug 语句将记录 rgba(76, 175, 80, 0.1)，这是正确的。

但是如果我们尝试这样做：

test {
    --mat-mdc-button-ripple-color: rgba(#4caf50, 0.1);
}

编译结果为：

test {
  --mat-mdc-button-ripple-color: rgba(#4caf50, 0.1);
}

想法？

Answer 1

好的 - 在研究了 Angular Material 按钮的源代码之后，波纹代码就这样做了并且它可以工作：

--mat-mdc-button-ripple-color:  #{rgba($color, 0.1)};