Loops

You can also write loops with Less. This can help reduce code you write especially as you make it more dynamic and variable based.

Here's a practical example to build a simple grid system:

// Loop Mixin Grid
.make-grid-columns(@count, @iteration: 1) when (@count >= @iteration) {

    // Create Column Classes
    .col-@{iteration} {
        width: (@iteration * 100% / @count);
    }

    .make-grid-columns(@count, (@iteration + 1));
}

/* Clearfix Trick */
.row {
    &:after {
        content: '';
        display: table;
        clear: both;
    }
}
.col {
    float: left;
}
.make-grid-columns(10);
<div class="row">
    <div class="col col-2">2</div>
    <div class="col col-2">2</div>
    <div class="col col-2">2</div>
    <div class="col col-2">2</div>
    <div class="col col-2">2</div>
</div>

<div class="row">
    <div class="col col-5">5</div>
    <div class="col col-5">5</div>
</div>

Pretty awesome and easy to use. You can expand on this like Bootstrap does and implement responsiveness. In a perfect world, based on your grid break-points this would automatically update for responsive regardless of configuration.

Table of Contents