使用 sass 通过逗号加入属性列表答案

【问题标题】：join a property list by commas using sass使用 sass 通过逗号加入属性列表
【发布时间】：2013-11-21 10:39:46
【问题描述】：

我不太确定语法，但我使用逗号分隔的属性列表 $properties 并希望通过逗号加入它们，所以 (background-color, color) 变为 background-color .5s, color .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

【问题讨论】：

标签： sass mixins

【解决方案1】：

通过使用 2 个连接操作（追加和连接），您稍微复杂化了一点：

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

    @each $p in $properties {
        $props: append($props, $p $duration, comma);
    }

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

.foo {
    @include transition((background-color, color), '.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;
}

【讨论】：