Last Updated: February 25, 2016
·
1.374K
· gavmck

Use recursive mixins to generate grid systems really fast

//Calculates percentage width
.grid-col(@span,@numcols) {
width: percentage(@span/@numcols);
}

//Recursive mixin function to generate class names
.grid-generator(@span: 12, @numcols: 12, @mq: '') when (@span > 0) {
(~".@{mq}g-@{span}-@{numcols}") {
.grid-col(@span, @numcols);
}
.grid-generator(@span - 1,@numcols,@mq);
}

//Saftey for when @ span = 0
.grid-generator(0,@numcols,@mq) {}

//generate a 12 column grid
.grid-generator();