.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
.col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
.col-@{class}-push-0 {
left: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
.col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
.col-@{class}-pull-0 {
right: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}
// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);
}
// Create grid for specific class
.make-grid(@class) {
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class, width);
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
.loop-grid-columns(@grid-columns, @class, offset);
}
Столько строк кода :huh:
Решается куда проще
.grid-column(@index, @class, @type, @separation) {
.@{class}@{separation}@{index} {
@{type}: percentage((@index / @grid-columns));
}
}
.grid-columns(@index, @class, @type, @separation) when (@index >= 1) {
.grid-column(@index, @class, @type, @separation);
.grid-columns((@index - 1), @class, @type, @separation);
}
.grid(@class) {
.grid-columns(@grid-columns, @class, width, -col-);
.grid-columns(@grid-columns, @class, left, -push-);
.grid-columns(@grid-columns, @class, right, -pull-);
.grid-columns(@grid-columns, @class, margin-left, -offset-);
}
Ради интереса, залез и чутка не понял суть