CSS Variables are a Bad Idea

css-vairables.css

:root {
  --foreground-color: #333;
  --background-color: #fff;
}

body {
  background: var(--background-color);
  color: var(--foreground-color);
}

css-variables-fallback.css

:root {
  --foreground-color: #333;
  --background-color: #fff;
}

body {
  background: #fff;
  background: var(--background-color);
  color: #333;
  color: var(--foreground-color);
}

desired-result.css

body {
  background: #fff;
  color: #333;
}

sass-variables.scss

$foreground-color: #333;
$background-color: #fff;
 
 
body {
  background: $background-color;
  color: $foreground-color;
}