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

Question

我有这个混音：

apimanager

正在编译类似于：

.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

依旧......

Answer 1

由于您没有使用循环但只是使用所需的数字调用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);
}