Generated by SassMeister.com.

input.scss

// remove space from string
@function str-replace($string, $search, $replace) {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(
        str-slice($string, $index + str-length($search)),
        $search,
        $replace
      );
  }

  @return $string;
}

// convert string to list
@function str-split($string, $separator) {
  $split-arr: ();
  $index: str-index($string, $separator);
  @while $index != null {
    $item: str-slice($string, 1, $index - 1);
    $split-arr: append($split-arr, unquote($item));
    $string: str-slice($string, $index + 1);
    $index: str-index($string, $separator);
  }
  $split-arr: append($split-arr, unquote($string));
  @return $split-arr;
}

// convert string to number
@function number($string) {
  // Matrices
  $strings: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  $numbers: 0 1 2 3 4 5 6 7 8 9;

  // Result
  $result: 0;

  // Looping through all characters
  @for $i from 1 through str-length($string) {
    $character: str-slice($string, $i, $i);
    $index: index($strings, $character);

    @if not $index {
      @return false;
    }

    $number: nth($numbers, $index);
    $result: $result * 10 + $number;
  }

  @return $result;
}

@function convertStringToColor($colors) {
  $string: str-replace($colors, " ", "");
  $list: str-split($string, ",");
  $red: nth($list, 1);
  $green: nth($list, 2);
  $blue: nth($list, 3);

  $rgb: rgb(number($red), number($green), number($blue));

  @return $rgb;
}

$teaser-colors: (
  "123": (
    "selector": "#anchor-teaser123",
    "type": "landingpageElement-anchor",
    "bg-color": "212, 45, 67",
    "text-color": "186, 218, 85"
  ),
  "456": (
    "selector": "#anchor-teaser456",
    "type": "landingpageElement-anchor",
    "bg-color": "12, 45, 67",
    "text-color": "33, 33, 33"
  ),
  "678": (
    "selector": "#benefit-teaser456",
    "type": "landingpageElement-benefit",
    "bg-color": "12, 5,67",
    "text-color": "0, 0, 0"
  )
);

@each $key, $value in $teaser-colors {
  $selector: map_get($value, "selector");
  $type: map_get($value, "type");
  $text-color: convertStringToColor(map_get($value, "text-color"));
  $bg-color: convertStringToColor(map_get($value, "bg-color"));
  
  #{$selector} {
    color: $text-color;
    background-color: $bg-color;

    @if ($type == "landingpageElement-anchor") {
      &:hover {
        color: darken($text-color, 10);
      }
    }
  }
}

output.css

#anchor-teaser123 {
  color: #bada55;
  background-color: #d42d43;
}
#anchor-teaser123:hover {
  color: #a8cf2d;
}

#anchor-teaser456 {
  color: #212121;
  background-color: #0c2d43;
}
#anchor-teaser456:hover {
  color: #080808;
}

#benefit-teaser456 {
  color: black;
  background-color: #0c0543;
}

settings.json

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