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

【问题标题】：Create multiple text-shadow values using SASS/SCSS使用 SASS/SCSS 创建多个文本阴影值
【发布时间】：2016-07-09 23:46:04
【问题描述】：

所以我想创建一个具有许多不同值的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 规则都会简单地推翻前一个规则。

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

【问题讨论】：

明显问题：你试过text-shadow: @for $i from 1 through 100{...

标签： css sass

【解决方案1】：

您可以在loop 之外定义variable 并在其上收集阴影值。然后将变量添加为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;
}

【讨论】：