Как уменьшить количество циклов до одной вспомогательной функции?

Question

Контекст:

Платформы мы развиваемся по силам использования модифицированной версии 960gs, которые мы имеем свободу легко переопределить (по аналогии с тем, как ребенком тема работает в WordPress). Мы переключились на LESS примерно на год назад с целью модуляции всего унаследованного продукта, поставляемого CSS. Препроцессоры YAY CSS!

Я размышлял о том, чтобы портировать сетку в последнее время и подумал ... «Как здорово было бы иметь mixin, который только что сгенерировал всю систему сетки на основе некоторых переменных?» Я решил, что это будет очень классно.

Вопрос: Я сделал первый шаг при его рафинировании, но я натолкнулся на блокпост. У меня это до 3 циклов. но я бы хотел, чтобы это был всего лишь один прекрасный микс, который принимает.

Здесь будут коды:

.grid-loop(@type; @i) when (@i > 0) { 
    .gd-@{type}-@{i} { 
     .column(@i); 
    } 
    .grid-loop(@type, @i - 1); 
} 

.position-loop(@type; @i) when (@i > 0) { 
    .gd-@{type}-@{i} { 
     .position(@type, @i); 
    } 
    .position-loop(@type, @i - 1); 
} 

.padding-loop(@type; @i) when (@i > 0) { 
    .gd-@{type}-@{i} { 
     .padding(@type, @i); 
    } 
    .padding-loop(@type, @i - 1); 
} 

Названный таким образом:

.grid-loop(grid, @columns); 
.position-loop(push, @columns); 
.position-loop(pull, @columns); 
.padding-loop(prefix, @columns); 
.padding-loop(suffix, @columns); 

Не кажется очень DRY, я знаю ... мысли?

Answer 1

Я думаю, что это слишком много возможных путей для этого, чтобы вписаться в один ответ, так вот только точка намек запуска (только один из возможных вариантов):

// usage: 

.make-grid(6); 

// impl.: 

.make-grid(@n-columns) { 
    .loop(@n-columns); 
    .loop(@index) when (@index > 0) { 
     .loop((@index - 1)); 
     .make-grid-column(@index, @n-columns); 
    } 
} 

.make-grid-column(@i, @n) { 
    @value: ((@i/@n) * 100%); 
    .gd-grid-@{i} {width:  @value} 
    .gd-push-@{i} {left:  @value} 
    .gd-pull-@{i} {right:  @value} 
    .gd-offset-@{i} {margin-left: @value} 
    // etc. 
} 

Если предположить, что уже мильон меньше по генерации генерации сетки там может быть довольно вдохновляющим, чтобы узнать некоторые шаблоны/трюки от них, см. for example.