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

本文介绍了Sass 中具有可变参数列表的一个属性的多个值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I'm looking to have a mixin like +stacktextshadow(blue, red, green) spit out 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 属性声明.我希望它只做一次.但是，当我从 foo 循环中取出 text-shadow 时，它无法访问 $shadow1、$shadow2 等.

Tripled. And I know why, because it's running the text-shadow property declaration three times in the @for loop. I'd like it to only do that once. However, when I take the text-shadow out of the foor loop, it doesn't have access to $shadow1, $shadow2, etc.

另外，我不想重复以下内容: $shadow($i): append($i*1px $i*1px 0, nth($shadows,$i))(这显然不起作用)以便所有这些都是动态完成的——无论是我将一个参数传递给 mixin，还是 20.

Also, I'd like to not repeat myself with something along the lines of: $shadow($i): append($i*1px $i*1px 0, nth($shadows,$i)) (which obviously doesn't work) so that it is all done dynamically—whether I pass one argument into the mixin, or 20.

推荐答案

您可以在循环外创建一个变量来收集"阴影值，然后在您的 text-shadow 中使用该变量财产.示例:

You can create a variable outside the loop to "collect" the shadow values, and then use that variable in your text-shadow property. Example:

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