How to assign a Sass variable value into a CSS variable?

You cannot assign a Sass variable value into a custom CSS property directly. You have to put the Sass variable inside the hash curly braces #{$var}.

$myColor: #ffffff;
:root {
    --my-color: #{$myColor};
}

After compiling the Scss file

:root {
    --my-color: #ffffff;
}