angular: use global scss variables in child component scss without @import

Question

I would like to find a way how to import global scss variables without using @import, @use everytime. So I checked some other posts like this one Global scss variables for Angular components without importing them everytime. So I tried the css version but I don´t understand why it does not work for scss:

_variables.scss

:root {
    $color-black: black;
}

styles.scss

@import "./variables"

component.scss

p { color: $color-black; }

but the following "css" version is works fine:

_variables.scss{

:root {
    --color-black: black;
}

styles.scss

@import "./variables"

component.scss

p { color: var(--color-black); }