使用sass通过逗号连接属性列表

我不太清楚语法，但我使用了一个逗号分隔的属性列表

$properties

，并希望用逗号将它们连接起来，因此

（背景色，颜色）

变成

背景色.5s，颜色.5s

@mixin transition($properties, $duration) {
  $props: ();

  @each $prop in $properties {
    $tmp: $prop unquote($duration);
    $props: append($props, $tmp);
  }

  $str: join($props, ',');

  -moz-transition: $str, -moz-transform $duration;
  -webkit-transition: $str, -webkit-transform $duration;
  -o-transition: $str, -o-transform $duration;
  transition: $str, transform $duration;
}

我实际上得到的是：

border-color 0.5s background-color 0.5s ",", -moz-transform 0.5s

何时应该：

border-color 0.5s, background-color 0.5s, -moz-transform 0.5s

---

通过使用两个用于连接的操作（追加和连接），您将此操作复杂化了一点：

输出：

.foo {
  -moz-transition: background-color .5s, color .5s, -moz-transform .5s;
  -webkit-transition: background-color .5s, color .5s, -webkit-transform .5s;
  -o-transition: background-color .5s, color .5s, -o-transform .5s;
  transition: background-color .5s, color .5s, transform .5s;
}

---

通过使用两个用于连接的操作（追加和连接），您将此操作复杂化了一点：

输出：

.foo {
  -moz-transition: background-color .5s, color .5s, -moz-transform .5s;
  -webkit-transition: background-color .5s, color .5s, -webkit-transform .5s;
  -o-transition: background-color .5s, color .5s, -o-transform .5s;
  transition: background-color .5s, color .5s, transform .5s;
}