Sass 中具有可变参数列表的一个属性的多个值

Question

我希望有一个像+stacktextshadow(blue, red, green) 这样的mixin 吐出text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green;

目前这是我所拥有的：

=stacktextshadow($shadows...)
  @for $i from 1 through length($shadows)
    $shadow1: append(1px 1px 0, nth($shadows,1))
    $shadow2: append(2px 2px 0, nth($shadows,2))
    $shadow3: append(3px 3px 0, nth($shadows,3))
    text-shadow: $shadow1, $shadow2, $shadow3

h1
  +stacktextshadow(blue, red, green)

这给了我：

h1 {
  text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green;
  text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green;
  text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green; }

三倍。我知道为什么，因为它在@for 循环中运行了三次text-shadow 属性声明。我希望它只做一次。但是，当我将 text-shadow 退出 foo 循环时，它无法访问 $shadow1、$shadow2 等。

另外，我不想重复自己的内容：$shadow($i): append($i*1px $i*1px 0, nth($shadows,$i))（这显然行不通）所以这一切都是动态完成的——无论我将一个参数传递给 mixin，还是 20 .

Answer 1

您可以在循环外创建一个变量来“收集”阴影值，然后在您的text-shadow 属性中使用该变量。示例：

=stacktextshadow($shadows...)
  $all: ()
  @for $i from 1 through length($shadows)
    $all: append($all, append($i*1px $i*1px 0, nth($shadows, $i)), comma)

  text-shadow: $all

h1
  +stacktextshadow(blue, red, green)

输出：

h1 {
  text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green; }