Question

背景：

我们正在开发的平台强制使用960gs的修改版本，我们可以轻松覆盖（类似于word主题在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 );

看起来不是很干，我知道......想法？

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

假设已经有一个数以千计的基于Less的网格生成片段，那么学习某些模式/技巧可能会非常鼓舞人心，请参阅for example。

如何减少单个辅助函数的循环次数？

1 个答案: