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

Question

我有以下 SCSS 代码：

\n

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

\n

我希望我将 CSS 变量--xyzzy设置42为所有bar元素。相反，我得到的是 CSS 声明bar { --xyzzy: $bar; }。该变量未被解释。我需要使用#{\xe2\x80\xa6}语法来获取变量集。

\n

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

\n

实际结果：

\n

bar {\n  --xyzzy: $bar;\n}\n

\n

预期的：

\n

bar {\n  --xyzzy: 42;\n}\n

\n

Answer 1

这不是一个错误，而是 Sass 编译器如何处理 CSS 自定义属性（称为 CSS 变量）。该语法#{\xe2\x80\xa6}称为插值，它是将动态值注入自定义属性的唯一方法。这是文档的引用：

\n

\n

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

\n

\n

\n

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

\n

\n

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

\n

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

\n