Custom properties (CSS variables) Sass fallback mixin

// Custom properties to Sass fallback
// @params {String}: $customProp, $renderedValue

// Sass Variables
$color-base: #000000;
$color-base-darkest: #0b0b0b;
$color-base-darker: lighten($color-base, 20);
$color-base-dark: lighten($color-base, 40);
$color-base-light: lighten($color-base, 60);
$color-base-lighter: lighten($color-base, 80);

// Sass Variables Map
$VariablesMap: (
    color-base-darker: $color-base-darker,
    color-base-dark: $color-base-dark,
    color-base-light: $color-base-light,
    color-base-lighter: $color-base-lighter,
);

// :root custom properties generator
:root {
    @each $prop, $val in $VariablesMap {
        --#{$prop}: #{$val};
    }
}

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

// Usage:
// @include props('CSS Property ', 'Sass Map Key');
.item {
      @include props('background-color', 'color-base-dark');
}