gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 17:38:06 27 4
gpt4 key购买 nike

我正在寻找像 +stacktextshadow(blue, red, green) 这样的 mixin text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0绿色;

目前这是我所拥有的:

=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 从 foor 循环中取出时,它无法访问 $shadow1$shadow2 等.

此外,我不想重复以下内容:$shadow($i): append($i*1px $i*1px 0, nth($shadows,$i) )(这显然是行不通的)以便所有操作都是动态完成的——无论我是将一个参数传递到混入中,还是传递 20 个。

最佳答案

您可以在循环外创建一个变量来“收集”阴影值,然后在您的 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; }

关于sass - Sass 中具有可变参数列表的一个属性的多个值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29532303/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com