Can't use CSS variables or SCSS variables based on CSS variables in module configurations

If one would like to use dynamic variables the best practice is to have them as CSS variables and then use them as values for SCSS variables, the following example works fine. If the --primary variables is manipulated by JavaScript the header’s background color changes.

:root {
--primary: red;
}

$primary: var(--primary);

header {
background-color: $primary;
}

Although if one thinks in modular it’s better to multiple files and module configurations but it just doesn’t work the way it should. If this is get compiled, fails immediately even if using SCSS variables is skipped and only CSS variables are used:

Colors partial

$primary: var(--primary);

Header partial

$header-bg: grey !default;
header {
background-color: $header-bg;
}

Body style

@use 'colors' as colors;
@use 'header' as header with {
$header-bg: colors.$primary;
}

Main style

:root {
--primary: red;
}

[stof]

Well, Sass color functions expect to get colors to be able to change them. var(--primary) is not a Sass color. It is an unquoted string. So it cannot be changed by color.change. that’s totally expected.

[petervatler]

Well, Sass color functions expect to get colors to be able to change them. var(--primary) is not a Sass color. It is an unquoted string. So it cannot be changed by color.change. that’s totally expected.

Oh, thank you for the info, I didn’t know this. I use a UI framework based on the pattern above and wanted to implement dynamic color theme change in runtime.