Sass使用map-get设置CSS自定义变量失败问题求助

直接用Sass的插值语法#{}包裹map-get调用就能解决这个问题，修改后的SCSS代码如下：

.thing {
    --special-foreground-color: #{map-get($theme, primary)};
    color: map-get($theme, primary);
}

编译后的CSS会变成：

.thing {
    --special-foreground-color: #107d9f;
    color: #107d9f;
}

原因说明 #

Sass对标准CSS属性和自定义变量的处理逻辑不一样：

• 标准CSS属性的值会被Sass自动解析编译，所以map-get能正常返回颜色值；
• 但CSS自定义变量（--*格式）默认会被当作纯字符串处理，Sass不会主动解析里面的Sass函数，所以直接输出了map-get($theme, primary)的原始代码。
  用#{}包裹后，就会强制Sass先编译这个表达式，再把结果插入到自定义变量的值里。

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