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();
Written by Gavyn McKenzie
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#