Schreiben eines SASS-Mixins für 3D-Text mit Tiefe

Ich habe das folgende SASS-Mixin in meinem Projekt

@mixin text_3d($color){
  color: $color; 
  text-shadow:   0 3px 0 darken($color, 14%),
         0 4px 0 darken($color, 15%),
         0 5px 0 darken($color, 16%),
         0 6px 0 darken($color, 17%),
        3px 8px 15px rgba(0,0,0,0.1),
        3px 8px 5px rgba(0,0,0,0.3);

}

Ich möchte die mehreren "Textschatten" -Zeilen in eine Schleife umwandeln, kann aber nicht herausfinden, wie das geht. Im Pseudocode:

@mixin text_3d($color, $depth){
  color: $color; 
  text-shadow:   
       @for $i from 0 through $depth {
           0 ($i+3)px 0 darken($color, $i+14%), 
       }

    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);

}

Aber ich bekomme immer wieder Fehler, als ob ich das @ für dort nicht platzieren kann.

(Line 143: Invalid CSS after "  text-shadow:": expected expression (e.g. 1px, bold), was "@for $i from 0 ...")

Antworten auf die Frage(1)

Ihre Antwort auf die Frage