javascript - 较少的混合循环类但具有不同的值

Question

我有这个混音:

.myClass {
        .nth(1);
        .nth(2);
    .nth(@i) {
        &:nth-of-type(@{i}) {
            transition-delay: 0.2s;
        }
    }
}

编译成这样的:

.myClass:nth-of-type(1) {
  transition-delay: 0.2s;
}
.myClass:nth-of-type(2) {
  transition-delay: 0.2s;
}

我的问题是如何为 transition-delay 添加不同的值，因为在这种形式中将重复相同的值，我需要能够添加不同的值并编译如下内容:

.myClass:nth-of-type(1) {
  transition-delay: 0.5s;
}
.myClass:nth-of-type(2) {
  transition-delay: 0.02s;
}

等等……

Answer 1

由于您没有使用循环，而只是使用所需的数字调用混合，您可以在混合定义中为延迟值添加一个额外的参数，并像下面的代码块一样使用它:

.myClass {
  .nth(1; 0.2s);
  .nth(2; 0.5s);
  .nth(@i; @delay) {
    &:nth-of-type(@{i}) {
      transition-delay: @delay;
    }
  }
}

或者您可以像下面的代码块一样使用循环和数组:(我推荐这样做只是因为您不需要多次混合调用。)

@delays: 0.2s, 0.5s, 0.75s;
.myClass {
  .nth-loop(@i; @delays) when (@i > 0){
    @delay: extract(@delays, @i); /* take the delay value corresponding to element number from array */
      &:nth-of-type(@{i}) {
        transition-delay: @delay;
      }
    .nth-loop(@i - 1; @delays);
  }
  .nth-loop(3; @delays);
}