SCSS编译过程中变量未正常编译的技术问题咨询

问题重现 #

相关SCSS代码如下：

$gos-colors-aqua: #7FDBFF;
:r {
    --gos-colors-aqua: $gos-colors-aqua;
}

原因 #

SCSS编译器会将CSS自定义属性（即CSS变量）的赋值内容视为普通文本，不会自动解析其中的SCSS变量。直接将SCSS变量写在自定义属性赋值语句中时，编译后会保留原变量名，而非替换为对应的颜色值。

解决办法 #

使用SCSS的插值语法（#{}）包裹SCSS变量，让编译器识别并替换变量值：

$gos-colors-aqua: #7FDBFF;
:r {
    --gos-colors-aqua: #{$gos-colors-aqua};
}

编译后会生成正确的CSS代码：

:r {
    --gos-colors-aqua: #7FDBFF;
}

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