<div class="rating" data-rating="1">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rating="1.5">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rating="2">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rating="2.5">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rating="3">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rating="3.5">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rating="4">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rating="4.5">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating" data-rating="5">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>

// Yelp.com actually uses good old fashion icon sprites for its rating stars.
// This demo was mostly for fun, but one of the goals was to make something that 
// was printable!

// Author: @benjamin_knight

$font-size: 20px; // <-- Adjust this only!
$star-width: 1.5em;

body { 
  padding: 20px; 
  font-size: $font-size;
}

.rating {
  margin: 10px 0;
}

.rating i {
  display: inline-block;
  width: 0;
  height: $star-width;
  border-width: 0 ( $star-width / 2 );
  border-style: solid;
  border-color: #eee;
  border-radius: .22em;
  color: white;
  background: #eee;
  font-style: normal;
  line-height: $star-width + 0.1em;
  text-indent: -0.5em;
  text-shadow: 1px 0 1px hsl(0, 0%, 70%);
}


/** Colors */

@function stars-color($num) {
  $colors: #cc8b1f #dcb228 #f0991e #f26a2c #dd050b;
  @return if($num <= length($colors), nth($colors, $num), #333);
}

@for $i from 1 to 5 {
  @for $j from 1 through $i {
    [data-rating^='#{$i}'] .star-#{$j} {
      border-color: stars-color($i);
      // set background to avoid tiny lines between borders in print.
      background: stars-color($i);
    }
  }
  [data-rating^='#{$i}.5'] .star-#{$i+1} {
    border-left-color: stars-color($i);
  }
}

[data-rating="5"] i {
  $color: stars-color(5);
  background: $color;
  border-color: $color;
}


/** Print */

@media print {
  .rating {
    -webkit-print-color-adjust: exact;
    i {
      text-shadow: none;
    }
  }
}