使用SASS / SCSS创建多个文本阴影值

Question

所以我想用许多不同的值创建一个text-shadow效果，如下所示：

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

我尝试使用SCSS来实现这一点，但我不确定如何迭代选择器的值。例如，我试过：

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

但这只会回归：

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

每个后续text-shadow规则只会取代之前的规则。

有没有办法在文本阴影规则中循环？

Answer 1

您可以在variable旁边定义loop并在其上收集阴影值。然后将变量添加为text-shadow属性的值。

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