SCSS变量赋值CSS变量失效，需用#{…}？是特性还是Bug？

编写的SCSS代码 #

@mixin foo($bar: 42) {
    --xyzzy: $bar;
}
bar {
    @include foo;
}

预期结果 #

所有bar元素的CSS变量--xyzzy被设置为42。

实际生成的CSS #

bar {
  --xyzzy: $bar;
}

SCSS变量$bar未被解析，只有使用#{…}插值语法才能正常赋值。请问这是SCSS/SASS的特性还是Bug？能否不用插值语法实现变量解析？

解答 #

这是SCSS的特性，不是Bug。

这是因为CSS自定义属性（也就是--*这类变量）在SCSS里会被当作原生CSS值处理，SCSS不会自动解析里面的SCSS变量。毕竟CSS自定义属性本身支持动态赋值，SCSS得保留它的原生特性，所以不会主动替换其中的SCSS变量标识。

要是不想用插值语法，有两种替代思路：

• 先把SCSS变量存到临时变量再用：

  @mixin foo($bar: 42) {
    $temp: $bar;
    --xyzzy: #{$temp};
  }
  

  其实本质还是靠插值触发解析，只是写法上换了个形式。
• 结合SCSS变量和CSS的var()函数：
  适合需要动态覆盖的场景，前提是先定义好SCSS变量：

  $default-bar: 42;
  @mixin foo($bar: $default-bar) {
    --xyzzy: var(--custom-bar, #{$bar});
  }
  

  这种写法下，如果外部没定义--custom-bar，就会用SCSS变量$bar的值。

不过说实话，插值语法#{…}是SCSS里让SCSS变量在CSS自定义属性中生效的标准且最简洁的方式，官方也是推荐这么用的。

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