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