Wiele wartości jednej działce z listy zmiennych argument Sass

Question

szukam mieć wstawek jak +stacktextshadow(blue, red, green) wypluć text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green;

Obecnie jest to, co mam:

=stacktextshadow($shadows...) 
    @for $i from 1 through length($shadows) 
    $shadow1: append(1px 1px 0, nth($shadows,1)) 
    $shadow2: append(2px 2px 0, nth($shadows,2)) 
    $shadow3: append(3px 3px 0, nth($shadows,3)) 
    text-shadow: $shadow1, $shadow2, $shadow3 

h1 
    +stacktextshadow(blue, red, green) 

co daje mi:

h1 { 
    text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green; 
    text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green; 
    text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green; } 

Trzykrotnie. I wiem dlaczego, ponieważ trzykrotnie uruchamia deklarację właściwości text-shadow w pętli @for. Chciałbym to zrobić tylko raz. Jednak, gdy biorę text-shadow z pętli foor, nie mają dostępu do $shadow1, $shadow2 itd

Również chciałbym nie powtarzać coś wzdłuż linii: $shadow($i): append($i*1px $i*1px 0, nth($shadows,$i)) (co oczywiście nie działa) tak, że wszystko jest zrobione dynamicznie - czy przekazuję jeden argument do mixina, czy też 20.

Answer 1

Możesz utworzyć zmienną poza pętlą, aby "zebrać" wartości cienia, a następnie użyć tej zmienna we właściwości text-shadow. Przykład:

=stacktextshadow($shadows...) 
    $all:() 
    @for $i from 1 through length($shadows) 
    $all: append($all, append($i*1px $i*1px 0, nth($shadows, $i)), comma) 

    text-shadow: $all 

h1 
    +stacktextshadow(blue, red, green) 

wyjściowa:

h1 { 
    text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green; }