Sass mixin for non support fallbacks with custom properties

cssCustomPropertyFallback.scss

:root {
  --foo: green;
}

$ui-01: #555;

@mixin customProp($property, $css-value, $fallback-value) {
  #{$property}: $fallback-value;
  #{$property}: var(#{$css-value});
}

.button {
  @include customProp(color, --foo, $ui-01);
}

// CSS output with support
.button {
  color: green;
}

// without support
.button {
  color: #555;
}