On the surface, both of these do the same thing. These will both set the background to red.

SCSS:

body {
  $red: #ff0000;
  background: $red;
}

CSS:

body {
  --red: #ff0000;
  background: var(--red);
}

But they are different. There's a CSS Tricks example that talks about some of these differences.

There's a difference not mentioned in the article that tripped me up.

SASS variables compile at runtime, CSS custom properties compile when they're used.

I wanted to send a variable to a mixin, which requires a SASS variable - because it's compiling the mixin before it knows what the CSS custom property refers to.

But I also wanted a dark theme, which is much easier using CSS custom properties.

There is a solution

You an combine them!

$black: #000000;
$white: #ffffff;

:root {
  --text-colour: #{$black};
  --bg-colour: #{$white};
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-colour: #{$white}
    --bg-colour: #{$black};
  }
}

To convert the SASS variable to a CSS custom property you put curly brackets around it, and a hash in front. If you've used template literals in JavaScript it's the same thing, just with a # instead of a $ (because we already have $ in the variable name). It's like someone just went for the next key over on a US keyboard.