.stars.s1
  .star
  .star
  .star.pick
  .star
  .star
.stars.s2
  .star.half
  .star.half
  .star.half
  .star.half
  .star.half
  .star.half
  .star.half
  .star.half
  .star.half.pick
  .star.half

@import "compass/css3";

$on: linear-gradient(left, lightskyblue, violet, mediumvioletred);
$on2: linear-gradient(left, greenyellow, orange, crimson);
$off: #c0c0c0;
$fill: true;
$tilt: true;

.stars {
  height: 4rem;
  width: 20rem;
  @if $fill {
    @include background($on);
    &.s2 {
      @include background($on2);
    }
  } @else {
    background-color: $off;
    &:hover {
      @include background($on);
      &.s2 {
        @include background($on2);
      }
    }
  }
  &:hover .star {
    background-color: transparent;
  }
  .star {
    @if $tilt {
      background-image: url('https://s.cdpn.io/2361/whitestarbigtilt.png');
    } @else {
      background-image: url('https://s.cdpn.io/2361/whitestarbig.png');
    }
    height: 100%;
    width: 4rem;
    float: left;
    cursor: pointer;
    &.half {
      @if $tilt {
        width: 1.7em;
      } @else {
        width: 2rem;
      }
      &:nth-child(2n) {
        background-position: right;
        @if $tilt {width: 2.3rem;}
      }
    }
  }
}
.pick ~ .star, .star:hover ~ .star {
  background-color: $off;
}

html {
  font-size: 10px;
}
.stars {
  margin: -6rem -10rem;
  position: absolute;
  left: 50%;
  top: 50%;
  &.s2 {
    margin-top: 2rem;
  }
}

$('.stars').on('click', '.star', function() {
  $(this).siblings('.pick').removeClass('pick');
  $(this).addClass('pick');
});