Generated by SassMeister.com.

input.scss

.sitefooter {
  $parent: &;
  
  border-top: 2px solid blue;
  padding: 20px  0;

  #{$parent}--home {
    color: red;   
  }
  
}   
// ==================== 


@mixin cssvar ($name, $value: '', $prefix: pm) {
    --#{$prefix}-#{$name}: #{$value};
}

@mixin cssvars($css_variables, $target: ":root") {
    #{$target} {
        @each $name, $value in $css_variables {
            --#{$name}: #{$value};
        }
    }
}
$btn-vars: (
    btn-primary-text-color: #fff,
    btn-secondary-text-color: #fff,
    btn-border-radius: 4px,
    btn-text-transform: uppercase,
    btn-font-size: 18px,
    btn-font-weight: 600,
    btn-height: 40px,
    btn-padding: 0 30px,
);

@include cssvars($btn-vars, ".btn");

.button, button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
        // { hard coded properties }
    padding: cssvar(btn-padding);
    line-height: cssvar(btn-height);
    font-size: cssvar(btn-font-size);
    font-weight: cssvar(btn-font-weight);
    letter-spacing: cssvar(btn-font-weight);
    color: cssvar(primary-color);
    border-radius: cssvar(btn-border-radius);
    border: 1px solid cssvar(primary-color);
    text-transform: cssvar(btn-text-transform);
    &.focus, &:focus,
    &.hover, &:hover {
        // { ... whatever you want }
    }
    &.button-block {
        display: block;
        width: 100%;
    }
    &.button-primary {
        color: cssvar(btn-primary-text-color);
        background-color: cssvar(primary-color);
        border-color: cssvar(primary-color);
    }
    &.button-secondary {
        color: cssvar(btn-secondary-text-color);
        background-color: cssvar(secondary-color);
        border-color: cssvar(secondary-color);
    }
    &.button--big {
        @include cssvar(btn-height, 56px);
    }
}


// =====================

$custom-colors: (
  "black": (
    "base": #000
  ),
  "white": (
    "base": #fff,
    "nearly": #fafafa
  ),
  "brown": (
    "base": brown,
    "medium": sandybrown
  ),
  "orange": (
    "base": #fd8700,
    "medium":#ffb30e,
    "light": #ffe0a5
  ),
  "yellow": (
    "base": yellow,
    "light": #ffc
  ),
  "red": (
    "base": #C5004A,
    "my": #a20000,
    "dark": #7F0036
  ),
  "grey": (
    "base": #c0c0c0,
    "light": #e0e0e0,
    "lighter": #f7f7f7,
    "dark": #333,
    "darker": #aaa,
  ),
  "blue": (
    "base": #0b4396,
    "light1": #a0cbe4,
    "light2": #c0e7fe,
    "medium": #0277BD,
    "dark": #082840,
    "navy": #17050F
  ),
  green: (
    "base": teal
  )
);

@function get-color( $color, $shade: 'base', $map : $custom-colors ){
  // check color exists
  @if (map-has-key($map, $color)) {
    $value: map-get($map, unquote($color));
    // check if color or map
    @if type-of($value) == color {
      // return color
      @return $value;
    }
    // check shade of color exists
    @if (map-has-key($value, $shade)) {
      // return shade of color
      @return map-get($value, $shade);
    }
  }
  // else do nothing
  @return null;
}

/* ===================== */
.test {
    --textColor: #{get-color("red", my)};
    color: get-color("red", my);
}

output.css

.sitefooter {
  border-top: 2px solid blue;
  padding: 20px 0;
}
.sitefooter .sitefooter--home {
  color: red;
}

.btn {
  --btn-primary-text-color: #fff;
  --btn-secondary-text-color: #fff;
  --btn-border-radius: 4px;
  --btn-text-transform: uppercase;
  --btn-font-size: 18px;
  --btn-font-weight: 600;
  --btn-height: 40px;
  --btn-padding: 0 30px;
}

.button, button,
input[type=button],
input[type=submit],
input[type=reset] {
  padding: cssvar(btn-padding);
  line-height: cssvar(btn-height);
  font-size: cssvar(btn-font-size);
  font-weight: cssvar(btn-font-weight);
  letter-spacing: cssvar(btn-font-weight);
  color: cssvar(primary-color);
  border-radius: cssvar(btn-border-radius);
  border: 1px solid cssvar(primary-color);
  text-transform: cssvar(btn-text-transform);
}
.button.button-block, button.button-block,
input[type=button].button-block,
input[type=submit].button-block,
input[type=reset].button-block {
  display: block;
  width: 100%;
}
.button.button-primary, button.button-primary,
input[type=button].button-primary,
input[type=submit].button-primary,
input[type=reset].button-primary {
  color: cssvar(btn-primary-text-color);
  background-color: cssvar(primary-color);
  border-color: cssvar(primary-color);
}
.button.button-secondary, button.button-secondary,
input[type=button].button-secondary,
input[type=submit].button-secondary,
input[type=reset].button-secondary {
  color: cssvar(btn-secondary-text-color);
  background-color: cssvar(secondary-color);
  border-color: cssvar(secondary-color);
}
.button.button--big, button.button--big,
input[type=button].button--big,
input[type=submit].button--big,
input[type=reset].button--big {
  --pm-btn-height: 56px;
}

/* ===================== */
.test {
  --textColor: #a20000;
  color: #a20000;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}