valori multipli per una proprietà con elenchi di argomenti variabili in Sass

Question

Sto cercando di avere un mixin come +stacktextshadow(blue, red, green) sputare text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green;

Attualmente questo è quello che ho:

=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) 

che mi dà:

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; } 

Triplicato. E so perché, perché esegue la dichiarazione di proprietà text-shadow tre volte nel ciclo @for. Mi piacerebbe farlo solo una volta. Tuttavia, quando prendo il text-shadow fuori dal giro foor, non ha accesso a $shadow1, $shadow2, ecc

Inoltre, mi piacerebbe non ripetermi con qualcosa sulla falsariga di: $shadow($i): append($i*1px $i*1px 0, nth($shadows,$i)) (che ovviamente non funziona), in modo che tutto venga eseguito dinamicamente, indipendentemente dal fatto che passi un argomento nel mixin, o 20.

Answer 1

Puoi creare una variabile all'esterno del ciclo per "raccogliere" i valori di ombra, e quindi usarlo variabile nella proprietà text-shadow. Esempio:

=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) 

uscita:

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