Generated by SassMeister.com.

custom-properties.scss

@mixin setProp($prop, $val) {
  --#{$prop}: #{$val};
}

@mixin prop($customProp, $renderedValue) {
  // #{$customProp}: map-get($VariablesMap, $renderedValue);
  #{$customProp}: var(unquote('--#{$renderedValue}'));
}

// Colors
$black: #000;
$white: #fff;
$red: #E25050;
$green: #6DE250;


$text-color: #1f1f1f;
$error-color: $red;
$success-color: $green;

// Sass Variables Map
$VariablesMap: (
  text-color: $black,
  backgroun-color: $white,
  error: $red,
  success: $green,
);

// :root custom properties generator
:root {
  @each $prop, $val in $VariablesMap {
    @include setProp($prop, $val);
  }
}


h2 {
  @include prop('background-color', 'error');
}

.grey {
  @include setProp('error', #ccc)
}

.main {
  @include setProp('error', $green)
}

output.css

:root {
  --text-color: #000;
  --backgroun-color: #fff;
  --error: #E25050;
  --success: #6DE250;
}

h2 {
  background-color: var(--error);
}

.grey {
  --error: #ccc;
}

.main {
  --error: #6DE250;
}

settings.json

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