較少的CSS網格設置

Question

我創建較少的網格系統，我不知道如何優化grid.less 如果我chouse @ gridColumns：14;我需要在grid.less中添加新行，也許有一個選項可以自動執行此操作？

Variables.less

@gridColumns: 12; 
@gridWidth: 62.5em; 
@gridGutterWidth: 1.8em; 

@ grid.less

.l-1   { .grid(1); } 
.l-2   { .grid(2); } 
.l-3   { .grid(3); } 
.l-4   { .grid(4); } 
.l-5   { .grid(5); } 
.l-6   { .grid(6); } 
.l-7   { .grid(7); } 
.l-8   { .grid(8); } 
.l-9   { .grid(9); } 
.l-10  { .grid(10); } 
.l-11  { .grid(11); } 
.l-12  { .grid(12); } 

@ mixins.less

.grid(@num) { 
width: (100%/@gridColumns) * @num; 
position: relative;} 

Answer 1

的唯一明智的方法使用LESS的方法是使用recursive mixin like Twitter Bootstrap。

.spanX (@index) when (@index > 0) { 
    .span@{index} { .span(@index); } 
    .spanX(@index - 1); 
} 
.spanX (0) {} 

.span (@columns) { 
    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); 
}