以更少的循環創建逗號分隔的選擇

Question

目前我使用下面的代碼更少，以創建默認爲我的網格元素：

.create-grid-elements(@n, @i: 1) when (@i =< @n) { 
    .grid_@{i} { 
     position: relative; 
     display:inline; 
     float: left; 
     margin-left: 1%; 
     margin-right: 1%; 
    } 
    .create-grid-elements(@n, @i+1); 
} 

.create-grid-elements(16); 

，輸出：

.grid_1 { 
    ... 
} 

.grid_2 { 
    ... 
} 

... 

.grid_16 { 
    ... 
} 

爲了調試的目的使用瀏覽器開發工具，是否有一種方法來調整循環（或編寫一個新的循環），而不是爲網格寫入多個獨立選擇器，而是寫入一個逗號分隔的選擇器？

.grid_1, .grid_2, ... , .grid_16 { 
    ... 
} 

謝謝!!

Answer 1

你可以使用extend()：

擴展是一個都不能少僞類，它融合了選擇它放在與匹配什麼是它引用的。

只需創建一個基類，在此例中爲.grid_1。

然後extend它在循環內：。

由於基類正在擴展，所以不需要將其包含在循環中。該指數目前開始於2

.grid_1 { 
    position: relative; 
    display:inline; 
    float: left; 
    margin-left: 1%; 
    margin-right: 1%; 
} 

.create-grid-elements(@n, @i: 2) when (@i =< @n) { 
    .grid_@{i}:extend(.grid_1) {} 
    .create-grid-elements(@n, @i+1); 
} 

.create-grid-elements(16); 

輸出：

.grid_1, .grid_2, .grid_3, .grid_4, 
.grid_5, .grid_6, .grid_7, .grid_8, 
.grid_9, .grid_10, .grid_11, .grid_12, 
.grid_13, .grid_14, .grid_15, .grid_16 { 
    position: relative; 
    display: inline; 
    float: left; 
    margin-left: 1%; 
    margin-right: 1%; 
}