Sass Mixin接收多参数生成统一格式transition属性的实现方法咨询

嘿，这个需求其实很好实现，咱们用Sass的可变参数和循环就能轻松搞定！

你想要的效果可以通过Sass的可变参数和**@each循环**来实现，自动给每个传入的属性拼接上统一的过渡时长与缓动函数。

核心Mixin代码 #

@mixin transition($properties...) {
  // 定义默认的过渡配置
  $default-duration: 200ms;
  $default-timing: ease-in-out;

  // 遍历传入的属性，组装成完整的过渡声明列表
  $transition-values: ();
  @each $prop in $properties {
    $transition-values: append($transition-values, #{$prop} #{$default-duration} #{$default-timing}, comma);
  }

  // 输出最终的transition属性
  transition: $transition-values;
}

调用示例（和你想要的写法完全一致） #

.someClass {
  @include transition(color, background);
}

编译后的CSS输出 #

.someClass {
  transition: color 200ms ease-in-out, background 200ms ease-in-out;
}

扩展优化：支持自定义过渡配置 #

如果偶尔需要修改默认的时长或缓动函数，我们可以给Mixin加上可选参数，让它更灵活：

@mixin transition($properties..., $duration: 200ms, $timing: ease-in-out) {
  $transition-values: ();
  @each $prop in $properties {
    $transition-values: append($transition-values, #{$prop} #{$duration} #{$timing}, comma);
  }
  transition: $transition-values;
}

这样你还能按需自定义配置：

// 自定义过渡时长为300ms，缓动函数为linear
.anotherClass {
  @include transition(opacity, transform, 300ms, linear);
}

编译后输出：

.anotherClass {
  transition: opacity 300ms linear, transform 300ms linear;
}

这个方案完美匹配你的需求，还留了灵活扩展的空间，希望能帮到你！

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