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

Question

为了避免样板，我想编写一个函数/混合，获取任意数量的属性（但至少一个）的列表，并按照以下方式输出一些内容：（

margin-left, width

参数的示例）：

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

...最终 CSS 输出为：

{
  transition: margin-left 0.42s cubic-bezer(0.4, 0, 0.2, 1), width 0.42s cubic-bezer(0.4, 0, 0.2, 1);
  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：游乐场