менее Смешение зацикливание классов, но с разными значениями

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

Поскольку вы не используете цикл, но просто вызываете mixin с требуемыми числами, вы можете добавить дополнительный параметр для значения задержки в определении mixin и использовать его, как в нижнем коде блок:

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