Generated by SassMeister.com.

input.scss

// Define SCSS variables with default values
$header-color: purple;
$font-size: 16px;

// Create CSS custom properties with the same names and default values
:root {
  --header-color: #{$header-color};
  --font-size: #{$font-size};
}

// Global class selector
.brand-2024 {
  // Redefine CSS custom properties with desired values
  --header-color: red;
  --font-size: 18px;
}

// Use CSS custom properties in your styles
h1 {
  color: var(--header-color);
  font-size: var(--font-size);
}

markup.html

<div class="brand-2024">
    <h1>Hello Joe!</h1>
</div
>

output.css

:root {
  --header-color: purple;
  --font-size: 16px;
}

.brand-2024 {
  --header-color: red;
  --font-size: 18px;
}

h1 {
  color: var(--header-color);
  font-size: var(--font-size);
}

settings.json

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