Sass mixin参数赋值给CSS自定义属性时未被插值解析如何解决

Sass对CSS原生自定义属性（--* 格式的变量）做了特殊兼容处理：由于原生CSS自定义属性的值支持传入任意字符串供后续逻辑解析，Sass默认不会自动替换自定义属性值内的Sass变量，会直接原样输出，因此你会看到编译后的值仍然是$_1而不是对应的颜色值。

你需要给需要解析的Sass变量套上Sass官方指定的插值语法#{}，即可强制Sass在编译阶段替换变量为实际值。同时你提供的原始代码存在两处语法问题：变量定义末尾多了多余的逗号、右括号，且没有指定生效的选择器，修正后的完整代码如下：

// 修正后的Sass变量定义
$_1: rgb(25, 25, 27);
$_2: rgb(252, 243, 243);

// 这里以全局:root选择器为例，可替换为你实际需要的选择器
:root {
    --colors-1: #{$_1};
    --colors-2: #{$_2};
}

编译后得到的CSS输出符合预期：

/* ... */
:root {
    --colors-1: rgb(25, 25, 27);
    --colors-2: rgb(252, 243, 243);
}

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