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

Question

Контекст:

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

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

Вопрос: Я сделал первый шаг при его доработке, но я немного преградил путь. У меня это до 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 );

Не кажется, СУХОЙ, я знаю... мысли?

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

Предполагая, что там уже есть фрагменты, основанные на миллионе меньше, можно было бы вдохновиться изучением определенных шаблонов / трюков из них, см. Например.