javascript - 较少的mixin循环类，但具有不同的值

我有这个混入：

.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;
}

等等...

最佳答案

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

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

或者，您可以像下面的代码块中那样使用循环和数组：（我建议这样做是因为您不需要多个mixin调用。）

@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);
}

关于javascript - 较少的mixin循环类，但具有不同的值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40648817/