SASS/SCSS 变量不适用于 CSS 变量赋值

我有以下 SCSS 代码：

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

我希望得到 CSS 变量--xyzzy set to 42 on all bar元素。相反，我得到 CSS 说明bar { --xyzzy: $bar; }。该变量未被解释。我需要使用#{…}语法来获取变量集。

这是 SCSS/SASS 的功能吗？一个错误？我可以在不将变量名括起来的情况下进行解释吗#{…}?

实际结果：

bar {
  --xyzzy: $bar;
}

预期的：

bar {
  --xyzzy: 42;
}

这不是一个错误，而是 Sass 编译器如何处理 CSS 自定义属性（称为 CSS 变量）。语法#{…}叫做插值法 https://sass-lang.com/documentation/interpolation，这是将动态值注入自定义属性的唯一方法。这是来自doc https://sass-lang.com/documentation/style-rules/declarations#custom-properties:

CSS 自定义属性（也称为 CSS 变量）具有不寻常的声明语法：它们的声明值中几乎允许任何文本。此外，这些值可由 JavaScript 访问，因此任何值都可能与用户相关。这包括通常被解析为 SassScript 的值。

因此，Sass 解析自定义属性声明的方式与其他属性声明不同。所有标记，包括那些看起来像 SassScript 的标记，都会按原样传递到 CSS。唯一的例外是interpolation，这是将动态值注入自定义属性的唯一方法。

这就是你有这种行为的原因，只有这样做才有效：

@mixin foo($bar: 42) {
   --xyzzy: $bar;    // does not work
   --xyzzy: #{$bar}; // works
}