CSS variable mixin with @supports

CSS-variable-with-support.scss

$colors: (
  origin: grey,
  warning: orange,
  danger: red
);

:root {
  @each $key, $color in $colors {
    --#{key}: $color;
  }
}

@mixin bgcss($prop, $key) {
  #{$prop}: map-get($colors, $key);
  @if (map-has-key($colors, $key) == false) {
    @error "Unknown key `#{$key}`. checkout your `$colors` variable";
  }
  
  @supports (--foo: "bar") {
    #{$prop}: var(--#{$key});
  }
}
.container {
  @include bgcss('background-color', "origin");
}

// compiled
:root {
  --main: grey;
  --font: orange;
  --danger: red;
}

.container {
  background-color: grey;
  @supports (--foo: "bar") {
    background-color: var(--origin);
  }
}