# Combining SASS variables with CSS custom properties

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.](https://css-tricks.com/difference-between-types-of-css-variables/) 

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.