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

Question

I am gonna use css global variables in scss file so that I can change the button colour in any time.

I want to do like this:

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

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

...

But this makes the issue now.

Answer 1

SASS variables are compile time and final value depends on all files were @import in line. CSS variables are run-time and are calculated based on cascade(say if any parent element redeclares variable - it will be applied to children).

Also take a look into docs section on difference between

You can use css-vars to compile SASS variables into CSS custom properties. But you still cannot use CSS custom properties in SASS code, say, to calculate some value - since CSS property is not initialized yet.

Even with css-vars plugins, things are rather messy, because SASS files does not describe how component tree looks like finally so we cannot see cascade.

TL;DR; don't mix SASS variables and CSS custom properties. Use first for compile-time variables/calculation only and use latest one for run-time/cascade-based styling. Probably prefer using CSS custom properties only.