Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

// Ratings.
$ranks-color: gold !default;
@mixin clearfix() {
  content: "clearfix";
}
$fa-star-o: "empty";
$fa-star-half-o: "half";
$fa-star: "full";

@mixin get_content($p, $r, $half: false) {
  $next: $r + 1;
  @if $p > $next {
    content: $fa-star-o;
  } @else if $p == $next {
    @if $half {
      content: $fa-star-half-o;
    } @else {
      content: $fa-star-o;
    }
  } @else if $p < $next {
    content: $fa-star;
  }
}


// Class Name.
.ranks {

  // The basic structure for the ranks class is a simple `ul > li(x5) > i`,
  // with an optional container.  There are no real styles that come with
  // the container
  //
  // ```html
  // <div class="ranks__box">
  //   <ul class="ranks__list ranks__{number}[--half]">
  //     <li class="ranks__item"><i class="ranks__point point--1"></i></li>
  //     <li class="ranks__item"><i class="ranks__point point--2"></i></li>
  //     <li class="ranks__item"><i class="ranks__point point--3"></i></li>
  //     <li class="ranks__item"><i class="ranks__point point--4"></i></li>
  //     <li class="ranks__item"><i class="ranks__point point--5"></i></li>
  //   </ul>
  // </div>
  // ```

  &__box {
    margin: 0;
    padding: 0;
  }

  // The list containing the each of the points.
  &__list {
    @include clearfix;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  // Each list item.
  &__item {
    display: block;
    float: left;

    & + & {
      margin-left: 2px;
    }
  }

  // Each of the point markers.
  &__point {
    color: $ranks-color;
    text-shadow: 0 0 2px darken($ranks-color, 15%);
    font-size: 10px;
  }

  @each $r in 5, 4, 3, 2, 1, 0 {
    @if $r < 5 {
      &__#{$r}--half {
        @each $p in 1, 2, 3, 4, 5 {
          .point--#{$p}::before {
            @include get_content($p, $r, true)
          }
        }
      }
    }

    &__#{$r} {
      @each $p in 1, 2, 3, 4, 5 {
        .point--#{$p}::before{
          @include get_content($p, $r)
        }
      }
    }
  }
}

SassMeister-output.css

.ranks__box { margin: 0; padding: 0; }
.ranks__list { content: "clearfix"; margin: 0; padding: 0; list-style: none; }
.ranks__item { display: block; float: left; }
.ranks__item + .ranks__item { margin-left: 2px; }
.ranks__point { color: gold; text-shadow: 0 0 2px #b39700; font-size: 10px; }
.ranks__5 .point--1::before { content: "full"; }
.ranks__5 .point--2::before { content: "full"; }
.ranks__5 .point--3::before { content: "full"; }
.ranks__5 .point--4::before { content: "full"; }
.ranks__5 .point--5::before { content: "full"; }
.ranks__4--half .point--1::before { content: "full"; }
.ranks__4--half .point--2::before { content: "full"; }
.ranks__4--half .point--3::before { content: "full"; }
.ranks__4--half .point--4::before { content: "full"; }
.ranks__4--half .point--5::before { content: "half"; }
.ranks__4 .point--1::before { content: "full"; }
.ranks__4 .point--2::before { content: "full"; }
.ranks__4 .point--3::before { content: "full"; }
.ranks__4 .point--4::before { content: "full"; }
.ranks__4 .point--5::before { content: "empty"; }
.ranks__3--half .point--1::before { content: "full"; }
.ranks__3--half .point--2::before { content: "full"; }
.ranks__3--half .point--3::before { content: "full"; }
.ranks__3--half .point--4::before { content: "half"; }
.ranks__3--half .point--5::before { content: "empty"; }
.ranks__3 .point--1::before { content: "full"; }
.ranks__3 .point--2::before { content: "full"; }
.ranks__3 .point--3::before { content: "full"; }
.ranks__3 .point--4::before { content: "empty"; }
.ranks__3 .point--5::before { content: "empty"; }
.ranks__2--half .point--1::before { content: "full"; }
.ranks__2--half .point--2::before { content: "full"; }
.ranks__2--half .point--3::before { content: "half"; }
.ranks__2--half .point--4::before { content: "empty"; }
.ranks__2--half .point--5::before { content: "empty"; }
.ranks__2 .point--1::before { content: "full"; }
.ranks__2 .point--2::before { content: "full"; }
.ranks__2 .point--3::before { content: "empty"; }
.ranks__2 .point--4::before { content: "empty"; }
.ranks__2 .point--5::before { content: "empty"; }
.ranks__1--half .point--1::before { content: "full"; }
.ranks__1--half .point--2::before { content: "half"; }
.ranks__1--half .point--3::before { content: "empty"; }
.ranks__1--half .point--4::before { content: "empty"; }
.ranks__1--half .point--5::before { content: "empty"; }
.ranks__1 .point--1::before { content: "full"; }
.ranks__1 .point--2::before { content: "empty"; }
.ranks__1 .point--3::before { content: "empty"; }
.ranks__1 .point--4::before { content: "empty"; }
.ranks__1 .point--5::before { content: "empty"; }
.ranks__0--half .point--1::before { content: "half"; }
.ranks__0--half .point--2::before { content: "empty"; }
.ranks__0--half .point--3::before { content: "empty"; }
.ranks__0--half .point--4::before { content: "empty"; }
.ranks__0--half .point--5::before { content: "empty"; }
.ranks__0 .point--1::before { content: "empty"; }
.ranks__0 .point--2::before { content: "empty"; }
.ranks__0 .point--3::before { content: "empty"; }
.ranks__0 .point--4::before { content: "empty"; }
.ranks__0 .point--5::before { content: "empty"; }