Generated by SassMeister.com.

input.scss

$bg-color: pink !default;
$body-color: gray !default;


// default theme here
:root {
    --background-color: #{$bg-color};
    --body-color: #{$body-color};
}

div {
    padding: 0.5rem;
    border: 1px solid black;
    margin-bottom: 1rem;
    background-color: var(--background-color);
    color: var(--body-color);
}


div.alternate {
    --background-color: red;
    background-color: var(--background-color);
}


// custom theme here
:root {
    --background-color: purple;
    --body-color: white;
}

markup.html

<div>div that is not red</div>

<div class="alternate">div that is red</div>

output.css

:root {
  --background-color: pink;
  --body-color: gray;
}

div {
  padding: 0.5rem;
  border: 1px solid black;
  margin-bottom: 1rem;
  background-color: var(--background-color);
  color: var(--body-color);
}

div.alternate {
  --background-color: red;
  background-color: var(--background-color);
}

:root {
  --background-color: purple;
  --body-color: white;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}