JSFiddle - React, Tailwind, and code Playground

by dreamyguy

HTML

<div class="rating rating-0"></div>
<div class="rating rating-1"></div>
<div class="rating rating-2"></div>
<div class="rating rating-3"></div>
<div class="rating rating-4"></div>
<div class="rating rating-5"></div>

SCSS

$max_rating = 5;

@mixin rating($rating){
    $star: "\2605";
    $no_star: "\2606";
    $content: "";
    @for $i from 1 through $max_rating {
        @if $rating < $i {
            $content: "#{$content}#{$no_star}";
        }
        @else {
            $content: "#{$content}#{$star}";
        }
    }
    content: $content;
}

.rating {
    color: #FFD700;
    font-size: 20px;
    line-height: 28px;
    @for $i from 0 through $max_rating {
        &.rating-#{$i}:before {
            @include rating($i);
        }
    }
}