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