如何从 mixin 的参数创建逗号分隔列表？

Question

为了避免样板，我想编写一个函数/混合，获取 CSS 属性列表（至少一个），并为每个属性编写相同的转换，并相应地输出

will-change

。给定

margin-left, width

，输出：

{
  transition: margin-left $some-value, width $some-value;
  will-change: margin-left, width;
}

我发现我可以使用带有扩展运算符（

@mixin some-mixin($args...)

）的参数列表，并尝试使用

@each

进行循环，但我真的不知道如何在单个属性中使用

@each

并用逗号连接结果, 没有结束逗号。

Answer 1

这是 github 评论，它引导我找到了答案。

---

'sass:list'中有一个函数叫

append

，可以用来创建逗号分隔列表，如下：

@use "sass:list";

$move-bezier: 0.42s cubic-bezier(0.4, 0, 0.2, 1);

@mixin transition($args...) {
  $transition: ();
  $will-change: ();
  @each $arg in $args {
    $transition: append($transition, append($arg, $move-bezier, space), comma);
    $will-change: append($will-change, $arg, comma);
  }
  transition: $transition;
  will-change: $will-change;
}

输入（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：游乐场