Sass如何用@each构建含多参数的单条CSS transition规则？

嘿，这个需求完全可以轻松实现，而且根本不需要手动做字符串拼接——Sass的列表（List）特性刚好能完美解决这个问题，咱们直接看具体实现：

核心实现代码 #

首先写出符合需求的混合宏：

@mixin transition($targets...) {
  // 初始化一个空列表，用来存储每个属性的过渡规则片段
  $transition-list: ();
  
  // 遍历传入的每个目标属性
  @each $target in $targets {
    // 把当前属性和固定的过渡参数组合成一个子列表
    $transition-item: $target 100ms ease-out;
    // 将子列表添加到大列表中，用逗号作为分隔符（对应CSS的多值分隔规则）
    $transition-list: append($transition-list, $transition-item, comma);
  }
  
  // 直接输出transition属性，Sass会自动把列表转换成标准的CSS语法
  transition: $transition-list;
}

调用方式 #

按照你想要的方式调用即可：

.foo {
  @include transition(color, width);
}

编译结果 #

最终会生成你期望的CSS代码：

.foo {
  transition: color 100ms ease-out, width 100ms ease-out;
}

额外优化（可选） #

如果想要让混合宏更灵活，还可以把固定的过渡时长、缓动函数也做成可选参数，方便按需调整：

@mixin transition($targets..., $duration: 100ms, $timing: ease-out) {
  $transition-list: ();
  
  @each $target in $targets {
    $transition-item: $target $duration $timing;
    $transition-list: append($transition-list, $transition-item, comma);
  }
  
  // 只有当传入了属性参数时才输出transition规则
  @if length($transition-list) > 0 {
    transition: $transition-list;
  }
}

比如你可以这样自定义参数：

.bar {
  @include transition(background, transform, 200ms, linear);
}

编译后会得到：

.bar {
  transition: background 200ms linear, transform 200ms linear;
}

为什么不用字符串拼接？ #

Sass的列表类型就是专门用来处理CSS这种多值集合的，用append()函数来构建列表比手动拼接字符串更可靠，不仅能避免语法错误，还能更好地利用Sass的原生特性，代码也更易读维护。

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