Unable to set SCSS variable to CSS variable?

Just use string interpolation:

$color-black: #000000;

body {
    --color: #{$color-black};
}

Apparently the old behaviour is not intended and violated the language specs of SASS:

• CSS variables mixed with SCSS variables don't emit proper CSS in 4.8+
• CSS variables aren't properly compiled
• Assigning SASS variables to CSS Variables (Custom Properties) no longer works

scss and css

I found a workaround to mapping the scss variables to css variables.

See Terry's answer for better use

Scss:

// sass variable map 
$colors: (
  color-black: #FFBB00
);

// loop over each name, color
:root {
  // each item in color map
  @each $name, $color in $colors {
    --#{$name}: #{$color};
  }
}

Css:

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

I had an issue with older sass versions.

Trying to compile a list of variables coming from an array, it would get stuck with the double dash. Here's my solution in case it helps someone

$var-element:'--';

:root {
    @each $color in $color-variables {
     #{$var-element}#{nth($color, 1)}: #{nth($color, 2)};   
    }
}