Generated by SassMeister.com.

input.scss

$teaser-colors: (
  "123": (
    "selector": "#anchor-teaser123",
    "type": "landingpageElement-anchor",
    "bg-color": "green",
    "text-color": "#ffffff"
  ),
  "456": (
    "selector": "#anchor-teaser456",
    "type": "landingpageElement-anchor",
    "bg-color": "red",
    "text-color": "#000000"
  ),
  "678": (
    "selector": "#benefit-teaser456",
    "type": "landingpageElement-benefit",
    "bg-color": "blue",
    "text-color": "grey"
  )
);

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

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

output.css

#anchor-teaser123 {
  color: #ffffff;
  background-color: green;
}

#anchor-teaser123:hover {
  color: white;
}

#anchor-teaser456 {
  color: #000000;
  background-color: red;
}

#anchor-teaser456:hover {
  color: #1a1a1a;
}

#benefit-teaser456 {
  color: grey;
  background-color: blue;
}

settings.json

{
  "sass": {
    "compiler": "libsass/3.5.5",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}