無法正常執行較少的CSS循環

Question

我試圖創建不同的循環（類應該有不同的背景顏色），但我只能編譯第一個循環。

下面是一個例子：http://codepen.io/anon/pen/MyWgdo?editors=1100

而且我正在使用的代碼：

@temp0-9: #1976d2; 
@temp10-20: #00bcd4; 
@gap1: 10; 
@gap2: 10; 


.first (@i) when (@i > 0) { 
    span.temp-@{i} { 
    display:block; 
    background: @temp0-9; 
    } 
    .first(@i - 1); 
} 
.first(@gap1); 

.second (@i) when (@i > 15) { 
    span.temp-@{i} { 
    display:block; 
    background: @temp10-20; 
    } 
    .second(@i - 1); 
} 
.second(@gap2); 

編譯的結果如下：

span.temp-9 { 
    display: block; 
    background: #1976d2; 
} 
span.temp-8 { 
    display: block; 
    background: #1976d2; 
} 
span.temp-7 { 
    display: block; 
    background: #1976d2; 
} 
span.temp-6{ 
    display: block; 
    background: #1976d2; 
} 
span.temp-5{ 
    display: block; 
    background: #1976d2; 
} 
span.temp-4{ 
    display: block; 
    background: #1976d2; 
} 
span.temp-3{ 
    display: block; 
    background: #1976d2; 
} 
span.temp-2{ 
    display: block; 
    background: #1976d2; 
} 
span.temp-1{ 
    display: block; 
    background: #1976d2; 
} 
span.temp-0{ 
    display: block; 
    background: #1976d2; 
} 

只有10項，而不是20我期待着。

任何幫助？

Answer 1

你有你的循環的警戒條件錯誤。警戒條件規定，只有當輸入（@i）大於15，但作爲輸入傳遞的值（@gap2）僅爲10時，循環纔會執行，因此循環從未得到執行。

對於您所期待的輸出，請像下面的代碼片段那樣更改警戒條件。現在，守衛是@i > 0，因此循環將被執行，但第二個mixin中的選擇器插值使用@j變量（即@i + @gap1）。由於我們將@gap1添加到循環的索引中，附加到選擇器的值將大於第二個循環的10。

@temp0-9: #1976d2; 
@temp10-20: #00bcd4; 
@gap1: 10; 
@gap2: 10; 

.first (@i) when (@i > 0) { 
    span.temp-@{i} { 
    display:block; 
    background: @temp0-9; 
    } 
    .first(@i - 1); 
} 
.first(@gap1); 

.second (@i) when (@i > 0) { 
    @j: @i + @gap1; 
    span.temp-@{j} { 
    display:block; 
    background: @temp10-20; 
    } 
    .second(@i - 1); 
} 
.second(@gap2); 

Demo @ Less2CSS.org

---

如果有多個這樣的差距，然後寫一個循環（複雜邏輯）會比寫多個循環混入更好。下面是一個示例：

@gaps: 46, 19, 3, 4, 4, 14; /* the gap array */ 
@temps: red, crimson, orange, gold, yellow, green; /* the temps corresponding to each gap */ 

.gaps-loop(@i, @prevgap) when (@i > 0){ 
    @gap: extract(@gaps, @i); /* extract each gap one by one based on loop index */ 
    @temp: extract(@temps, @i); /* extract the temp corresponding to each gap */ 
    .span-gen-loop(@j) when (@j < @gap){ 
    /* loop to generate spans - executed as many times as @gap */ 
    @k: @j + @prevgap; /* add current index to previous gaps - this generates a running number from 0-90 */ 
    span.temp-@{k}{ 
     display:block; 
     background: @temp; 
    } 
    .span-gen-loop(@j + 1); 
    } 
    .span-gen-loop(0); 
    .gaps-loop(@i - 1, @prevgap + @gap); /* send current gap + previous gap(s) */ 
} 
.gaps-loop(length(@gaps), 0); /* loop as many times as there are gaps */