Dynamic Fold LESS Generation

folding.mixin.less

.setColumnWidths(@maxcolumns, @num_cols, @min_resolution){
	@media screen and(min-width: @min_resolution) {
		.row {
			.onecol {
				width: percentage(~`Math.min(1, (1 / @{num_cols}*Math.ceil(@{num_cols}*1/@{maxcolumns})))`);
			}
			.twocol {
				width: percentage(~`Math.min(1, (1 / @{num_cols}*Math.ceil(@{num_cols}*2/@{maxcolumns})))  `);
			}
			.threecol {
				width: percentage(~`Math.min(1, (1 / @{num_cols}*Math.ceil(@{num_cols}*3/@{maxcolumns})))`);
			}
			.fourcol {
				width: percentage(~`Math.min(1, (1 / @{num_cols}*Math.ceil(@{num_cols}*3/@{maxcolumns})))`);
			}
			.fivecol {
				width: percentage(~`Math.min(1, (1 / @{num_cols}*Math.ceil(@{num_cols}*5/@{maxcolumns})))`);
			}
			.sixcol {
				width: percentage(~`Math.min(1, (1 / @{num_cols}*Math.ceil(@{num_cols}*6/@{maxcolumns})))`);
			}
			.sevencol {
				width: percentage(~`Math.min(1, (1 / @{num_cols}*Math.ceil(@{num_cols}*7/@{maxcolumns})))`);
			}
			.eightcol {
				width: percentage(~`Math.min(1, (1 / @{num_cols}*Math.ceil(@{num_cols}*8/@{maxcolumns})))`);
			}
			.ninecol {
				width: percentage(~`Math.min(1, (1 / @{num_cols}*Math.ceil(@{num_cols}*9/@{maxcolumns})))`);
			}
			.tencol {
				width: percentage(~`Math.min(1, (1 / @{num_cols}*Math.ceil(@{num_cols}*10/@{maxcolumns})))`);
			}
			.elevencol {
				width: percentage(~`Math.min(1, (1 / @{num_cols}*Math.ceil(@{num_cols}*11/@{maxcolumns})))`);
			}
		}
	}
}
//example of setting widths
//               number of columns    number of columns in this fold     Media query min-width for this fold to occur        
.setColumnWidths(12,                  4,                                 420px);
.setColumnWidths(12, 12, 1920px);