在屬性選擇器中使用較少的參數

Question

我使用的是Less Loops，它們實際上只是遞歸參數化的mixin。

我想用通過在選擇定義參數（@counter）如下：

.loop(@counter) when (@counter > 0) { 
    // call next iteration 
    .loop((@counter - 1));  

    // code for each iteration 
    &[data-size="@counter"] { 
     width: (3px * @counter); 
     height: (3px * @counter); 
    } 
} 

div { 
    .loop(5); // launch the loop 
} 

如果您複製並粘貼到像less2css在線較少的編譯器，你會得到以下：

div[data-size="@counter"] { 
    width: 3px; 
    height: 3px; 
} 

而我要的是：

div[data-size="1"] { 
    width: 3px; 
    height: 3px; 
} 

這可能嗎？

Answer 1

轉出你有花括號{}這樣逃避變量：

.loop(@counter) when (@counter > 0) { 
    // call next iteration 
    .loop((@counter - 1));  

    // code for each iteration 
    &[data-size="@{counter}"] { 
     width: (3px * @counter); 
     height: (3px * @counter); 
    } 
} 

div { 
    .loop(5); // launch the loop 
}