====== SCSS: @-Rules ======

===== Schleifen =====

==== @each-Schleife: Farben und Klassenbezeichnung aus Array ====

Für jede Farbe im Array werden zwei neue Klassen angelegt, die teils den Farbnamen beinhalten und die jeweilige Farbe zugeordnet bekommen.

**SCSS:**
<code sass>
$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; 
        } 
    } 
}
</code>

**Ergebnis (CSS):**

<code sass>
.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; }
</code>