Using CSS Variables with SCSS Variables

Recently I ran into an issue when creating dark/light palettes with CSS Variables within my scss.

The issue was how scss handled the setting of a css variable with a scss variable.

The below example DID NOT WORK:

:root {
  --color-background: $white;
}

:root .dark-mode {
  --color-background: $black;
}

This is a breaking change and compatibility issue, so the need for interpolation is the fix (reference link).

By wrapping your scss variable with #{} fixes this compile issue!

:root {
  --color-background: #{$white};
}

:root .dark-mode {
  --color-background: #{$black};
}