Benutzer-Werkzeuge

Webseiten-Werkzeuge


css:scss:at-rules

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu der Vergleichsansicht

css:scss:at-rules [2019/07/03 18:22] (aktuell)
admin each-Schleife: Farben und Klassenbezeichnung aus Array
Zeile 1: Zeile 1:
 +====== 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>​
css/scss/at-rules.txt · Zuletzt geändert: 2019/07/03 18:22 von admin