Erstellen Sie mehrere text-shadow Werte mit SASS/SCSS

Question

Deshalb möchte ich einen text-shadow Effekt mit vielen verschiedenen Werte zu schaffen, das so etwas wie:

.drop-shadow{ 
    text-shadow: 
    1px 1px rgba(40,40,40,1) 
    2px 2px rgba(40,40,40,.99) 
    3px 3px rgba(40,40,40,.98) 
    4px 4px rgba(40,40,40,.97) 
    ...; 
} 

Ich habe mit SCSS versucht, dies zu erreichen, aber ich bin nicht sicher, wie man über den Wert eines Selektors iteriert. Zum Beispiel habe ich versucht:

.drop-shadow{ 
    @for $i from 1 through 100{ 
    $num: $i + px; 
    $pct: $i/100; 
    $black: 1 - $pct; 
    text-shadow: $num $num rgba(40,40,40,$black); 
    } 
} 

Aber das gibt nur:

.drop-shadow{ 
    text-shadow: 1px 1px rgba(40,40,40,1); 
    text-shadow: 2px 2px rgba(40,40,40,.99); 
    text-shadow: 3px 3px rgba(40,40,40,.98); 
    text-shadow: 4px 4px rgba(40,40,40,.97); 
    ...; 
} 

Wo jede nachfolgende text-shadow Regel einfach die vorherigen überstimmt.

Gibt es eine Möglichkeit, in der Text-Schatten-Regel zu loopen?

Answer 1

Sie können variable außerhalb der loop definieren und die Schattenwerte sammeln. Dann fügen Sie die Variable als Wert Ihrer text-shadow Eigenschaft hinzu.

.drop-shadow{ 
    $value:(); 
    @for $i from 1 through 100{ 
    $num: $i + px; 
    $pct: $i/100; 
    $black: 1 - $pct; 
    $theShadow:$num $num rgba(40,40,40,$black); 
    $value: append($value, $theShadow, comma) 

    } 
    text-shadow: $value; 
}