Skip to content

Instantly share code, notes, and snippets.

@lozandier
Last active November 14, 2015 18:12
Show Gist options
  • Save lozandier/691dabf3238779a15a89 to your computer and use it in GitHub Desktop.
Save lozandier/691dabf3238779a15a89 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="rating rating-0"></div>
<div class="rating rating-1"></div>
<div class="rating rating-2"></div>
<div class="rating rating-3"></div>
<div class="rating rating-4"></div>
<div class="rating rating-5"></div>
// ----
// libsass (v3.2.5)
// ----
$star-width: 50px;
$max-stars: 5;
.rating {
width: 240px;
height: 38px;
margin-bottom: 50px;
background: url("../images/stars.svg") no-repeat;
background-position: 0 0;
@for $i from 0 through $max-stars {
&.rating-#{$i} {
background-position: (-$star-width * ($max-stars - $i)) 0;
}
}
}
// .rating.rating-0 {
// background-position: -250px 0;
// }
// .rating.rating-1 {
// background-position: -200px 0;
// }
// .rating.rating-2 {
// background-position: -150px 0;
// }
// .rating.rating-3 {
// background-position: -100px 0;
// }
// .rating.rating-4 {
// background-position: -50px 0;
// }
// .rating.rating-5 {
// background-position: 0px 0;
// }
.rating {
width: 240px;
height: 38px;
margin-bottom: 50px;
background: url("../images/stars.svg") no-repeat;
background-position: 0 0;
}
.rating.rating-0 {
background-position: -250px 0;
}
.rating.rating-1 {
background-position: -200px 0;
}
.rating.rating-2 {
background-position: -150px 0;
}
.rating.rating-3 {
background-position: -100px 0;
}
.rating.rating-4 {
background-position: -50px 0;
}
.rating.rating-5 {
background-position: 0px 0;
}
<div class="rating rating-0"></div>
<div class="rating rating-1"></div>
<div class="rating rating-2"></div>
<div class="rating rating-3"></div>
<div class="rating rating-4"></div>
<div class="rating rating-5"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment