Generated by SassMeister.com.

input.scss

$primary: #334455;


.card {
    color: white;
    padding: 2rem;
    --primary-color: $primary;
}

.card {
    --primary-color: #{$primary};
}

.card {
    background: var(--primary-color);
}

markup.html

<div class="card">Card</div>    

output.css

.card {
  color: white;
  padding: 2rem;
  --primary-color: $primary;
}

.card {
  --primary-color: #334455;
}

.card {
  background: var(--primary-color);
}

settings.json

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