Flexible Sass Star Rating

star-rating.scss

// Generate flexible star rating selectors by using an icon font

// Output selector for star ratings
@function star-rating-selector($start: 1, $end: 10) {
    $return-val: "";
    
    @for $i from $start through $end {
        @if $i == $start {
            $return-val: ".star.star#{$i}";
        } @else {
            $return-val: $return-val + ", " + ".star.star#{$i}";
        }
    }
    
    @return $return-val;
}

// Set this to the number of stars to be displayed
$max-stars: 5;

// Set this to the total rating points (might be the same as $max-stars)
$total-rating-points: 10;

#{star-rating-selector(1, $total-rating-points)} {
    &:before {
        // Add more properties if needed
        // ...
        
        // Make sure, $icon-font-family and $star-rating-color are defined
        // (or replace them with something else)
        font-family: $icon-font-family;
        color: $star-rating-color;
    }
}

// Generate individual star rating selectors
@for $i from 1 through $total-rating-points {
    $quotient: $i / ($total-rating-points / $max-stars);
    $content: "";
    
    @for $j from 1 through $max-stars {
        @if $j <= floor($quotient) {
            // Modify the Unicode escapes as needed.
            $content: $content + "\2730";   // Full star
        } @else if $j == ceil($quotient) and $quotient % 1 != 0 {
            $content: $content + "\272b";   // Half star
        } @else if $j > ceil($quotient) {
            $content: $content + "\272f";   // Empty star
        }
    }
    
    .star.star#{$i}:before {
        content: $content;
    }
}