Menggunakan fungsi SASS rgba dalam konteks pembolehubah CSS?

Question

Bagaimana cara kita membuat SASS rgba 将 rgba(#4caf50, 0.1) 转换为 rgba(76, 175, 80, 0.1)apabila konteksnya ialah bahagian nilai bagi pengisytiharan pembolehubah CSS?

Untuk kejelasan, berikut ialah contoh:

$green: #4caf50;

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

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

Tetapi jika kita mencuba ini:

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

Hasil kompilasi ialah:

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

Idea?

Answer 1

Ok - selepas melihat ke dalam kod sumber butang Angular Material, kod riak melakukan ini dan ia berfungsi:

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