Benutzer-Werkzeuge

Webseiten-Werkzeuge


css:scss:at-rules
no way to compare when less than two revisions

Unterschiede

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: 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