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