Use CSS variable safety.

mixin-use-var.scss

// Use CSS variable safety
@mixin use-var($property, $value, $fallback: false, $compatible-mode: false) {
  // if fallback value given
  @if $fallback {
    // if need compatible selector
    @if $compatible-mode {
      @if type-of($compatible-mode) == string {
        #{$property}: var(--#{$value}, #{$fallback});

        #{$compatible-mode} & {
          #{$property}: $fallback;
        }
      } @else {
        #{$property}: $fallback;
        #{$property}: var(--#{$value}, #{$fallback});
      }
    } @else {
      #{$property}: var(--#{$value}, #{$fallback});
    }
  } @else {
    #{$property}: var(--#{$value});
  }
}

:root {
  --color-brand: #ff6700;
}

/* For modern browser only */
.header {
  @include use-var(background-color, color-brand);
}

/* For modern browser with fallback value */
.header {
  @include use-var(background-color, color-brand, #000);
}

/* For legacy browser with test */
.header {
  @include use-var(background-color, color-brand, #000, '.no-custom-properties');
}

/* For legacy browser */
.header {
  @include use-var(background-color, color-brand, #000, true);
}

output.css

:root {
  --color-brand: #ff6700;
}

/* For modern browser only */
.header {
  background-color: var(--color-brand);
}

/* For modern browser with fallback value */
.header {
  background-color: var(--color-brand, #000);
}

/* For legacy browser with test */
.header {
  background-color: var(--color-brand, #000);
}
.no-custom-properties .header {
  background-color: #000;
}

/* For legacy browser */
.header {
  background-color: #000;
  background-color: var(--color-brand, #000);
}