loopsless960.gsgrid-system

How can I reduce the number of loops to a single helper function?


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?


Solution

  • I think it's just too many possible ways to do this to fit into one answer, so here's just a starting point hint (just one of possible variants):

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

    Assuming there's already a zillion Less based grid generation snippets out there it could be quite inspirational to learn certain patterns/tricks from those, see for example.