.main
  - (1..3).each do |i|
    .items-wrap
      .item-star
        - (1..10).each do |x|
          %input{:type => "radio", :value=> "#{6 - x}", :id=>"star-row#{i}-col-#{x}", :name=>"star-row#{i}"}/
          %label{:for => "star-row#{i}-col-#{x}"}
            %i.ion-beer
            
            
.credits
  %a{:href => "https://codepen.io/marko-zub/", :target=>'_blank'}
    My other codepens  
View Compiled
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
html,
body{
  height: 100%;
  overflow: hidden;
}
body {
  position: relative;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}


$star_bg: #ccc;
$star_bg_active: #f39c12;
$star_bg_hover: red;

.main {
  text-align: center;
  margin: 100px auto;
}

.item-star {
  overflow: hidden;
  display: inline-block;
  margin: 10px 0 10px;
  text-align: center;
    input {
      &:checked {
        & ~ label {
          color: $star_bg_active;
        }
      }
  }
  &:hover {
    label {
      &:hover {
        color: $star_bg_hover;
        & ~ label {
          color: $star_bg_hover;
        }
      }
    }
  }
  .star-rating {
    float: right;
    margin-right: 5px;
  }
  input {
    display: none;
  }
  label {
    float: right;
    font-size: 35px;
    margin: 0 15px;
    color: $star_bg;
    display: block;
    @include transition(all 0.2s ease-in-out);
  }
}

.credits {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 6px 15px;
  width: 100%;
  font-size: 14px;
  letter-spacing: 0.02em;
  font-family: "Roboto";
  a {
    color: #333;
    font-size: 13x;
    text-decoration: none;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.