grid - 更少的 CSS 网格设置

Question

我正在创建更少的网格系统，但我不知道如何优化 grid.less 如果我 chouse @gridColumns: 14; 我需要在 grid.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 的唯一明智方法是使用递归 mixin，例如 Twitter Bootstrap。

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

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