Für jede Farbe im Array werden zwei neue Klassen angelegt, die teils den Farbnamen beinhalten und die jeweilige Farbe zugeordnet bekommen.
SCSS:
$brand-colors: ( foo: #D0021B, bar: #4A90E2, baz: #9013FE, ); @each $color-key, $color-value in $brand-colors { .c-brand--#{$color-key} { background: transparentize($color-value, .5); .c-brand__title { color: $color-value; } } }
Ergebnis (CSS):
.c-brand--foo { background: rgba(208, 2, 27, 0.5); } .c-brand--foo .c-brand__title { color: #D0021B; } .c-brand--bar { background: rgba(74, 144, 226, 0.5); } .c-brand--bar .c-brand__title { color: #4A90E2; } .c-brand--baz { background: rgba(144, 19, 254, 0.5); } .c-brand--baz .c-brand__title { color: #9013FE; }
