Mixin guards, as described besides others in the Using mixin guards (as an alternative for the if…else statements) recipe, can also be used to dynamically build a set of CSS classes. In this recipe, you will learn how to do this.
Create a
shadesofblue.less
Less file, and write down the following Less code into it:.shadesofblue(@number; @blue:100%) when (@number > 0) { .shadesofblue(@number - 1, @blue - 10%); @classname: e(%(".color-%a",@number)); @{classname} { background-color: rgb(0, 0, @blue); height:30px; } } .shadesofblue(10);
You can, for instance, use the following snippet of the HTML code to see the effect of the compiled Less code from the preceding step:
<div class="color-1"></div> <div class="color-2"></div> <div class="color-3"></div> <div class="color-4"></div> ...