Recently, I stumbled upon a versatile one-image rating widget created with SASS by the team at AirBnB. I am interested in replicating something similar using LESS. While I could manually write out the CSS, I prefer to generate it dynamically with LESS. My main hurdle lies in dynamically appending the numbers from 1 to 10 to the class (for example, .filled_1 up to .filled_10). Is this achievable in LESS?
Below is the functional SASS code:
$starWidth: 44px;
$starOffset: 0 -43px;
$numStars: 5;
$steps: 2;
$total: $numStars * $steps;
@mixin filled($n: 0) {
width: ($starWidth / $steps) * $n;
}
.stars {
background: url(/images/sprite.png) repeat-x top left;
height: 43px;
&.empty {
background-position: $starOffset;
width: $numStars * $starWidth;
}
@for $i from 0 through ($total) {
&.filled_#{$i} { @include filled($i) }
}
}
This results in the following CSS output:
.stars {
background: url(/images/sprite.png) repeat-x top left;
height: 43px; }
.stars.empty {
background-position: 0 -43px;
width: 220px; }
.stars.filled_0 {
width: 0px; }
.stars.filled_1 {
width: 22px; }
...
.stars.filled_9 {
width: 198px; }
.stars.filled_10 {
width: 220px; }
I am seeking guidance on how to achieve a similar loop and inclusion in LESS as opposed to CSS.
The resulting HTML structure will resemble the following (where 9 indicates 4.5 stars):
<div class="stars empty">
<div class="stars filled_9">4.5</div>
</div>