Generated by SassMeister.com.

input.scss

// entnommen: https://github.com/jensgro/11ty-starter
// ======= Farben
$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
  )
);

// Color Function
// https://gist.github.com/lewismcarey/de2a70fe93ab235ba103
@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;
}


// transform a list of Sass-variables into custom properties
@mixin cssvars($vars, $target: ":root") {
  #{$target} {
      @each $name, $value in $vars {
          --#{$name}: #{$value};
      }
  }
}


// The custom properties for :root
$root-vars: (
  textColor: #{get-color("black")},
  pageBgColor: #{get-color("white")},
  linkColor: #{get-color("red", my)},
  linkColorHover: #{lighten(get-color("red", my), 10%)},
);

$zam-vars: (
  textColor: #101010,
  pageBgColor: #{get-color("white")},
  linkColor: #fd8700,
  linkColorHover: #{lighten(get-color("red", my), 20%)}, 
);

$sass-vars: (
  textColor: #{get-color("black")},
  pageBgColor: #{get-color("white")},
  linkColor: #{get-color("red", my)},
  linkColorHover: #{lighten(get-color("red", my), 10%)},
);


@include cssvars($root-vars);

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

$test: get-color("red", my);

.test {
    color: $test;
    border-color: get-color("pageBgColor", $map: $zam-vars);
    background: get-color("textColor", $map: $zam-vars);

}

output.css

:root {
  --textColor: #000;
  --pageBgColor: #fff;
  --linkColor: #a20000;
  --linkColorHover: #d50000;
}

body.zam {
  --textColor: #101010;
  --pageBgColor: #fff;
  --linkColor: #fd8700;
  --linkColorHover: #ff0909;
}

.test {
  color: #a20000;
  border-color: #fd8700;
  background: #101010;
}

settings.json

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