Benutzer-Werkzeuge

Webseiten-Werkzeuge


css:scss:at-rules

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:

$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; }
css/scss/at-rules.txt · Zuletzt geändert: 2019/07/03 18:22 von admin