Grid 更少的css网格设置

我正在创建更少的网格系统，我不知道如何优化网格 如果我选择@gridColumns:14；我需要在grid.less中添加新线，也许有其他选项可以自动执行

变量。较少

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

.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); }

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

@grid.less

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

.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); }

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

@mixins.less

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

.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); }

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

---

用更少的钱做这件事的唯一明智的方法是使用一个新的工具

---

我开始用更少的，也许你可以给我一些解释，如何用//注释正确地创建这个系统？谢谢