Sass 中具有可变参数列表的一个属性的多个值 [英] Multiple values for one property with variable argument lists in 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; }
这篇关于Sass 中具有可变参数列表的一个属性的多个值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!