减少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));
}