1

Context:

The platform we are developing on forces the use of a modified version of the 960gs which we have the freedom to easily override (similar to the way child themes work in wordpress). We switched to LESS about a year back with the intent to modularize all the inherited product delivered CSS. YAY CSS preprocessors!

I was pondering porting the grid system over recently and thought... 'How awesome would it be to have a mixin that just generated the whole grid system based on some variables?' I decided it would be pretty awesome.

Question: I've take a first pass at refining it but I've hit a bit of a roadblock. I've got it down to 3 loops. but I'd like it to be just one beautiful mixin that accepts.

Here be the codes:

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

Called thusly: 

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

Doesn't seem very DRY, I know...thoughts?

4

1 回答 1

2

我认为这样做的方法太多，无法适应一个答案，所以这里只是一个起点提示（只是可能的变体之一）：

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

假设已经有无数的基于较少的网格生成片段，从这些片段中学习某些模式/技巧可能会非常鼓舞人心，例如参见.

于 2014-09-17T17:06:14.723 回答