Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.
— | css:scss:at-rules [2019/07/03 18:22] (aktuell) – each-Schleife: Farben und Klassenbezeichnung aus Array admin | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== SCSS: @-Rules ====== | ||
+ | ===== Schleifen ===== | ||
+ | |||
+ | ==== @each-Schleife: | ||
+ | |||
+ | 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: # | ||
+ | bar: # | ||
+ | baz: # | ||
+ | ); | ||
+ | |||
+ | |||
+ | @each $color-key, $color-value in $brand-colors { | ||
+ | .c-brand--# | ||
+ | background: transparentize($color-value, | ||
+ | | ||
+ | | ||
+ | .c-brand__title { | ||
+ | color: $color-value; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | **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; } | ||
+ | </ |