// ----
// libsass (v3.2.2)
// ----

// Mixin that sets container dimensions, etc:
@mixin rating-container($star-count, $star-size, $star-spacing) {
  // Calculate container width:
  $container-width: $star-count * $star-size + (($star-count - 1) * $star-spacing);
  
  width: $container-width;
  height: $star-size;
  position: relative;
  // Include mixin that sets the background for 0 yellow stars:
  @include rating-background(0, $star-count, $star-size, $star-spacing);
  
  // CSS to reset some browser defaults:
  &, li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
  }
  
  li {
    height: $star-size;
    position: absolute;
  }
  
  a {
    width: 100%;
    height: $star-size;
    display: block;
  }
  
  // Set dimenions & z-index of each star element:
  @for $i from 1 through $star-count {
    .star-#{$i} {
      width: $i * $star-size + (($i - 1) * $star-spacing);
      z-index: ($star-count + 1) - $i;
      
      // Add hover state:
      &:hover {
        @include rating-background($i, $star-count, $star-size, $star-spacing);
      }
    }
  }
}

// Mixin that sets background image based on number of stars:
@mixin rating-background($stars-on, $star-count, $star-size, $star-spacing) {
  $current-star: 0; // Current iteration
  $stars: (); // Comma separated list to store bg
  
  // Go from 1 through number of stars:
  @for $i from 1 through $star-count {
    // Calculate background position:
    $background-position: #{$current-star * $star-size + $current-star * $star-spacing} 0;
    // Set star to "on" if its number is <= $stars-on:
    $star-state: if($i <= $stars-on, "on", "off");
    // Append to the list (comma separated):
    $stars: append($stars, url("http://advancedsass.com/images/star_#{$star-state}.png") #{$background-position} / #{$star-size} no-repeat, comma);
    // Increase current iteration counter:
    $current-star: $current-star + 1;
  }

  // Output the background image:
  background: $stars;
}

// Use this to add a rating element (plus corresponding HTML):
.rating {
  @include rating-container(
    $star-count: 5,
    $star-size: 40px,
    $star-spacing: 10px
  );
}

.rating2 {
  @include rating-container(
    $star-count: 8,
    $star-size: 60px,
    $star-spacing: 10px
  );
}