Getting Started with Less

Loops

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.