How use a variable root css in scss

_abstracts-mixins-variables-root.scss

// ABSTRACTS - MIXINS
// variables-root
// =================================================



// Creation of the mixin: root-prop
@mixin root-prop($prop: null, $value: null) {
	@if ($prop and $value) {
		#{$prop}: $value;
	}
}

_abstracts-variables-colors.scss

// ABSTRACTS - VARIABLES
// colors
// =================================================



// VARIABLES SCSS
$color-white: #ffffff;
$color-black: #000000;
$color-brand-1: #00538A;
$color-brand-2: #FFD600;
$color-brand-gradient: linear-gradient(rgba($color-brand-1, 1) 5%, rgba($color-brand-2, 1) 70%, rgba($color-white, 0) 100%);


// VARIABLES CSS
// Usage of the mixin: root-prop
:root {
	@include root-prop(--color-white, #ffffff);
	@include root-prop(--color-black, #000000);
	@include root-prop(--color-brand-1, $color-brand-1);
	@include root-prop(--color-brand-2, $color-brand-2);
	@include root-prop(--color-brand-gradient, $color-brand-gradient);
	@include root-prop(--swiper-theme-color, mix(#ffffff, $color-brand-1, 20%));
	@include root-prop(--swiper-navigation-size, 44px);
}

styles.css

/* Output with no errors */

:root {
    --color-black: #000000;
    --color-brand-1: #00538A;
    --color-brand-2: #FFD600;
    --color-brand-gradient: linear-gradient(rgba(#00538A, 1) 5%, rgba(#FFD600, 1) 70%, rgba(#FFFFFF, 0) 100%);
    --swiper-theme-color: #4d87ad;
    --swiper-navigation-size: 44px;
}