Define CSS Custom Properties With CSS Variables

It doesn't work to directly declare a CSS custom property using SCSS variables like this:

$primary-action: #057A5B;

.btn-primary {
  --button-color: $primary-action;
}

After SCSS pre-processing, the resulting CSS will look like this:

.btn-primary {
  --button-color: $primary-action;
}

Instead of the variable being translated into its declared value (#057A5B in this case), it is left as is.

This is because CSS custom property syntax is unusual enough that it gets processed literally. The only way to incorporate a variable is with interpolation.

$primary-action: #057A5B;

.btn-primary {
  --button-color: #{$primary-action};
}

Wrapping the SCSS variable in interpolation syntax (#{ ... }) will do the job.

source