如何在 scss 文件中使用 css 全局变量？

Question

我将在 scss 文件中使用 css 全局变量，以便随时更改按钮颜色。

我想这样做：

:root {
--button-color: #FF0000;
}

$button-color: var(--button-color);

...

但这成为了现在的问题。

Answer 1

SASS 变量是编译时间，最终值取决于所有文件都是@import行。 CSS 变量是运行时变量，并且基于级联计算（例如，如果任何父元素重新声明变量 - 它将应用于子元素）。

另请查看有关两者之间差异的文档部分

您可以使用css-vars将 SASS 变量编译成 CSS 自定义属性。 但是您仍然不能在 SASS 代码中使用 CSS 自定义属性来计算某个值 - 因为 CSS 属性尚未初始化。

即使使用css-vars插件，事情也相当混乱，因为 SASS 文件没有描述组件树最终的样子，所以我们看不到级联。

TL;博士; 不要混合 SASS 变量和 CSS 自定义属性。 first 仅用于编译时变量/计算，并将最新的用于运行时/基于级联的样式。 可能更喜欢仅使用 CSS 自定义属性。