少混入循環類，但有不同的價值觀

我有這樣的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; 
}

等等......

來源

2016-11-17 BurebistaRuler

你必須修改你的mixin以延遲作爲參數（或）有s數學計算的延遲（如第一元素1秒，2秒等第二等將意味着@i * 1s）。 – Harry

@哈利是啊，但我真的不知道該怎麼做:)）也許使用索引和劃分.. – BurebistaRuler

哪一個？前者還是後者？「transition-delay」的值是否有一個模式？ – Harry

由於您沒有使用循環，而只是調用所需數字的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); 
}

來源

2016-11-17 07:51:38 Harry

少混入循環類，但有不同的價值觀

回答

相關問題