如何在CSS变量声明中让SASS rgba函数正常转换颜色值？

当在CSS自定义属性（变量）的取值中使用Sass的rgba()函数时，Sass不会自动将十六进制颜色（如#4caf50）转换为RGB数值形式，而是直接保留原始写法，导致编译结果不符合预期。

解决方案1：预编译rgba值到Sass变量再插值 #

先通过Sass变量预计算出转换后的rgba值，再用插值语法#{$variable}将其注入到CSS变量中：

$green: #4caf50;
$green-rgba: rgba($green, 0.1);

test {
  --mat-mdc-button-ripple-color: #{$green-rgba};
}

编译后结果：

test {
  --mat-mdc-button-ripple-color: rgba(76, 175, 80, 0.1);
}

解决方案2：提取颜色通道手动构建rgba #

使用Sass的red()、green()、blue()函数提取十六进制颜色的RGB通道数值，直接构建rgba字符串：

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

编译后同样会生成目标RGB数值形式的rgba值。

核心原因 #

Sass对CSS变量的取值采取“原样传递”策略，不会主动解析其中的函数调用逻辑，因此必须通过预编译变量或颜色通道提取的方式，先完成颜色转换，再赋值给CSS变量。

内容的提问来源于stack exchange，提问作者Ole