Create multiple text-shadow values using SASS/SCSS

Question

So I want to create a text-shadow effect with many different values, something like this:

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

I have tried using SCSS to achieve this, but I'm not sure how to iterate over the value of a selector. For example, I tried:

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

But this just returns:

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

Where each subsequent text-shadow rule simply overrules the previous one.

Is there any way to loop inside of the text-shadow rule?

Answer 1

You can define variable out side the loop and collect the shadow values on it. Then add the variable as a value of your text-shadow property.

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