如何基于Sass混合宏参数生成无尾逗号的逗号分隔属性列表？

直接用SCSS的列表操作和append()函数就能解决你遇到的拼接问题，不用手动处理末尾逗号，实现代码如下：

// 定义混合宏：接收可变属性列表，可选过渡时长、缓动函数
@mixin transition-props($props..., $duration: 0.3s, $timing-function: ease) {
  $transition-list: ();
  // 遍历属性，拼接过渡规则并添加到列表
  @each $prop in $props {
    $transition-list: append($transition-list, #{$prop} #{$duration} #{$timing-function}, comma);
  }

  transition: $transition-list;
  will-change: $props;
}

使用示例 #

.target-element {
  @include transition-props(margin-left, width);
}

编译后的CSS输出 #

.target-element {
  transition: margin-left 0.3s ease, width 0.3s ease;
  will-change: margin-left, width;
}

关键说明 #

• $props...用于接收任意数量的CSS属性参数
• append($list, $value, comma)指定用逗号作为列表分隔符，自动避免末尾多余逗号
• will-change直接传入$props列表即可，SCSS会自动将其转换为逗号分隔的字符串
• 可自定义过渡时长$duration和缓动函数$timing-function，适配不同场景需求

内容的提问来源于stack exchange，提问作者tao