解锁了一个scss的新技能(@each)

在公司做的一个需求，有一个页面的内容需要一行一行展现出来，如下效果：

从上面的图片到底部的按钮，一个一个的出来(这是最开始的动效，后来觉得有点慢，中间的文字改成了两行两行出现)，这个时候css代码是这样子的：

.fade-enter-active {
  transition-property: opacity; // 规定设置过渡效果的css属性的名称
  transition-duration: 1s; // 规定过渡效果需要多少秒或毫秒
  transition-timing-function: ease; // 规定速度效果的速度曲线
  &.yomi {
    transition-delay: 1s; // 定义过渡效果何时开始(这里因为页面跳转的动画也需要时间，所以动画开始时延迟1s，往后每一项的延迟时间应该在上一个动画完成后开始，也就是逐次加上transition-duration即1s)
  }
  &.text0 {
    transition-delay: 2s;
  }
  &.text1 {
    transition-delay: 3s;
  }
  &.text2 {
    transition-delay: 4s;
  }
  &.text3 {
    transition-delay: 5s;
  }
  &.text4 {
    transition-delay: 6s;
  }
  &.text5 {
    transition-delay: 7s;
  }
  &.next-btn {
    transition-delay: 8s;
  }
}

换个scss高级一点的写法，是长这个样子的，编译后和上面的代码一样。

// index($list, $value):返回一个值在列表中的位置值，从1开始。
$transition-delay: 1s; // 带$符表示变量
$transition-duration: 1s;
$list: yomi, text0, text1, text2, text3, text4, text5, next-btn;
.fade-enter-active {
  transition: opacity $transition-duration ease;
  @each $item in $list { // @each可以遍历列表$list中的值
    &.#{$item} {
      transition-delay: $transition-delay * index($list, $item); // 通过变量直接计算出每个class的transition-delay值
    }
  }
}

从代码的简洁性上看，@each的写法已然很香了。

但是这里我想表达另外一个好处，那就是特别好调试，类似于这种动画，一般情况下都是需要对动效时间进行多次尝试，UI同学细品之后才会决定最终效果，这个时候如果是上面那种写法，每调试一次，那么每个class后面的 transition-delay 属性都需要修改一遍，但是下面的这种写法，只需要修改上面已经定义好的两个变量( $transition-duration 和 $transition-delay )就可以了，其他的class已经通过这两个变量计算好了。

scss太香了。