Verwenden Sie SASS RGBA-Funktionen im Kontext von CSS-Variablen?

Question

Wie erstellen wir SASS rgba 将 rgba(#4caf50, 0.1) 转换为 rgba(76, 175, 80, 0.1)wenn der Kontext die Wertseite einer CSS-Variablendeklaration ist?

Zur Verdeutlichung hier ein Beispiel:

$green: #4caf50;

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

@debug 语句将记录 rgba(76, 175, 80, 0.1), das stimmt.

Aber wenn wir das versuchen:

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

Das Kompilierungsergebnis ist:

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

Ideen?

Answer 1

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

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