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="rating">
  <span><i class="fa fa-male"></i></span>
  <span><i class="fa fa-male"></i></span>
  <span><i class="fa fa-male"></i></span>
  <span><i class="fa fa-male"></i></span>
  <span><i class="fa fa-male"></i></span>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$light: rgba(100,100,100,0.5);
$dark: #007AA3;

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}
.rating > span {
  display: inline-block;
  position: relative;
  font-size:1.5em;
  width: 0.8em;
  color: $light;
}
.rating > span:hover {
  color: $dark;
}
.rating > span:hover,
.rating > span:hover ~ span {
  color: $dark;
}

body { padding: 100px; }

SassMeister-output.css

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}

.rating > span {
  display: inline-block;
  position: relative;
  font-size: 1.5em;
  width: 0.8em;
  color: rgba(100, 100, 100, 0.5);
}

.rating > span:hover {
  color: #007AA3;
}

.rating > span:hover,
.rating > span:hover ~ span {
  color: #007AA3;
}

body {
  padding: 100px;
}

SassMeister-rendered.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="rating">
  <span><i class="fa fa-male"></i></span>
  <span><i class="fa fa-male"></i></span>
  <span><i class="fa fa-male"></i></span>
  <span><i class="fa fa-male"></i></span>
  <span><i class="fa fa-male"></i></span>
</div>