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

xe55xuns 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(108)

当上下文是CSS变量声明的值端时，我们如何让SASS rgba将rgba(#4caf50, 0.1)转换为rgba(76, 175, 80, 0.1)？
为了清楚起见，这里有一个例子：

$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);
}

有什么想法？

1条答案

OK -在研究了Angular Material按钮的源代码后，涟漪代码是这样做的，它可以工作：

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