提问人：tao 提问时间：11/16/2023 最后编辑：tao 更新时间：11/17/2023 访问量：27
如何从 mixin 的参数中创建逗号分隔的列表？
How do I create a comma separated list from mixin's arguments?
问：
为了避免样板，我想编写一个函数/mixin，其中包含 CSS 属性列表（至少一个），并为每个属性编写相同的过渡，并相应地输出。给定 ，输出：will-changemargin-left, width
{
transition: margin-left $some-value, width $some-value;
will-change: margin-left, width;
}
我发现我可以使用带有扩展运算符 （） 的参数列表并尝试使用 进行循环，但我真的不知道如何在单个属性中使用并用逗号连接结果，而没有结束逗号。@mixin some-mixin($args...)@each@each
答：
1赞
tao
11/16/2023
#1
这是 github 评论，它让我找到了答案。
有一个名为 append in 的函数，可用于创建逗号分隔的列表，如下所示：'sass:list'
@use "sass:list";
$timing: 0.42s cubic-bezier(0.4, 0, 0.2, 1);
@mixin transition($args...) {
$tr: ();
$wc: ();
@each $arg in $args {
$tr: append($tr, append($arg, $timing, space), comma);
$wc: append($wc, $arg, comma);
}
transition: $tr;
will-change: $wc;
}
输入 （SCSS）：
.foo {
@include transition(width, margin-left);
}
.bar {
@include transition(transform);
}
输出 （CSS）：
.foo {
transition: width 0.42s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.42s cubic-bezier(0.4, 0, 0.2, 1);
will-change: width, margin-left;
}
.bar {
transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
查看它在 SASS： Playground 中的工作原理。
评论