Miscompilation when Using Sass and CSS Variables

[naftulikay]

I'm on Linux/x64 with sass version 1.72.0, and I can also replicate this error on the playground.

Here is my source in SCSS:

$black: #1a1a1a;
$white: #f2f2f2;

@property --text-color {
  syntax: "<color>";
  inherits: true;
  initial-value: $black;
}

@property --background-color {
  syntax: "<color>";
  inherits: true;
  initial-value: $white;
}

:root {
  font-family: sans-serif;
}

html[data-theme="light"] body {
  --text-color: $white;
  --background-color: $black;
}

html[data-theme="dark"] body {
  --text-color: $black;
  --background-color: $white;
}

body {
  color: var(--text-color);
  background-color: var(--background-color);

  margin: 3rem;
}

I'm using Sass variables for $white and $black, and runtime CSS variables --text-color and --background-color to change the text/background color for a simple dark/light theme system.

The output of the above is this:

// NOTE $white/$black expand properly here:
@property --text-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #1a1a1a;
}

@property --background-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #f2f2f2;
}

:root {
  font-family: sans-serif;
}

// NOTE $white/$black do not expand properly here:
html[data-theme=light] body {
  --text-color: $white;
  --background-color: $black;
}

html[data-theme=dark] body {
  --text-color: $black;
  --background-color: $white;
}

Is there something I'm missing here? I know the difference between Sass variables and CSS variables, but I'm not sure why it's producing this output, which is not valid CSS and does not work.

[ntkme]

See https://sass-lang.com/documentation/style-rules/declarations/#custom-properties

You need interpolation. e.g.

$black: #1a1a1a;
$white: #f2f2f2;

html[data-theme=light] body {
  --text-color: #{$white};
  --background-color: #{$black};
}