SCSS自定义函数BlendColor未编译生效问题求助

问题场景 #

你的SCSS代码中，在CSS自定义属性（--Neum-*）里使用了Sass变量$Mustard和自定义函数BlendColor，但通过node-sass编译后，这些Sass语法并未被解析，直接保留在了最终CSS中。

问题原因 #

Sass默认会将CSS自定义属性的内容视为纯字符串，不会自动解析其中的Sass变量或函数调用。要触发解析，必须使用Sass的**插值语法#{}**明确标记需要计算的部分。

修正后的SCSS代码 #

@function BlendColor($color1, $color2, $ratio) {
    $r: min(1, max(0, $ratio));
    $ir: 1 - $r;
    $red: round(red($color1) * $r + red($color2) * $ir);
    $green: round(green($color1) * $r + green($color2) * $ir);
    $blue: round(blue($color1) * $r + blue($color2) * $ir);
    @return rgb($red, $green, $blue);
}

$Mustard : #FFD449;

.Neum-Mustard {
    --Neum-Color: #{$Mustard};
    --Neum-Light-Shadow: #{BlendColor($Mustard,#ffffff,0.2)};
    --Neum-Dark-Shadow: #{BlendColor($Mustard,#000000,0.2)};
    --Neum-Text: #000000;
}

编译后的正确CSS结果 #

执行原编译命令node-sass static/scss/Style.scss static/css/Style.css后，生成的CSS会包含计算后的颜色值：

.Neum-Mustard {
  --Neum-Color: #ffd449;
  --Neum-Light-Shadow: rgb(255, 219, 89);
  --Neum-Dark-Shadow: rgb(204, 163, 36);
  --Neum-Text: #000000;
}

原理说明 #

插值语法#{}会通知Sass解析包裹内部的表达式，将变量值或函数计算结果替换到CSS自定义属性中，而非保留原Sass代码。这样就能确保最终CSS中的自定义属性包含正确的颜色值。

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