Generated by SassMeister.com.

SassMeister-input-HTML.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="star-rating">
      <div class="star-rating__wrap">
        <input class="star-rating__input" id="star-rating-5" type="radio" name="rating" value="5">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-4" type="radio" name="rating" value="4">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-3" type="radio" name="rating" value="3">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-2" type="radio" name="rating" value="2">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-1" type="radio" name="rating" value="1">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
      </div>
</div>

SassMeister-input.sass

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

.star-rating
  font-size: 0

.star-rating__wrap
  display: inline-block
  font-size: 1rem
  &:after
    content: ""
    display: table
    clear: both

.star-rating__ico
  float: right
  padding-left: 2px
  cursor: pointer
  color: #FFB300
  &:last-child
    padding-left: 0

.star-rating__input
  display: none

.star-rating__ico:hover
  &:before, ~ .star-rating__ico:before
    content: "\f005"

.star-rating__input:checked ~ .star-rating__ico:before
  content: "\f005"

SassMeister-output.css

@charset "UTF-8";
.star-rating {
  font-size: 0; }

.star-rating__wrap {
  display: inline-block;
  font-size: 1rem; }
  .star-rating__wrap:after {
    content: "";
    display: table;
    clear: both; }

.star-rating__ico {
  float: right;
  padding-left: 2px;
  cursor: pointer;
  color: #FFB300; }
  .star-rating__ico:last-child {
    padding-left: 0; }

.star-rating__input {
  display: none; }

.star-rating__ico:hover:before, .star-rating__ico:hover ~ .star-rating__ico:before {
  content: ""; }

.star-rating__input:checked ~ .star-rating__ico:before {
  content: ""; }

SassMeister-rendered.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="star-rating">
      <div class="star-rating__wrap">
        <input class="star-rating__input" id="star-rating-5" type="radio" name="rating" value="5">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-4" type="radio" name="rating" value="4">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-3" type="radio" name="rating" value="3">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-2" type="radio" name="rating" value="2">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-1" type="radio" name="rating" value="1">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
      </div>
</div>