Skip to content

Instantly share code, notes, and snippets.

@andysolomon

andysolomon/SassMeister-input-HTML.html

Created May 13, 2015 22:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save andysolomon/f9de68ddd183c24d4fbd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save andysolomon/f9de68ddd183c24d4fbd to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<ul class="rating">
<li class="star-1"><a href="#1">1 star</a></li>
<li class="star-2"><a href="#2">2 stars</a></li>
<li class="star-3"><a href="#3">3 stars</a></li>
<li class="star-4"><a href="#4">4 stars</a></li>
<li class="star-5"><a href="#5">5 stars</a></li>
</ul>
<ul class="rating2">
<li class="star-1"><a href="#1">1 star</a></li>
<li class="star-2"><a href="#2">2 stars</a></li>
<li class="star-3"><a href="#3">3 stars</a></li>
<li class="star-4"><a href="#4">4 stars</a></li>
<li class="star-5"><a href="#5">5 stars</a></li>
<li class="star-6"><a href="#6">6 stars</a></li>
<li class="star-7"><a href="#7">7 stars</a></li>
<li class="star-8"><a href="#8">8 stars</a></li>
</ul>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.2)
// ----
// Mixin that sets container dimensions, etc:
@mixin rating-container($star-count, $star-size, $star-spacing) {
// Calculate container width:
$container-width: $star-count * $star-size + (($star-count - 1) * $star-spacing);
width: $container-width;
height: $star-size;
position: relative;
// Include mixin that sets the background for 0 yellow stars:
@include rating-background(0, $star-count, $star-size, $star-spacing);
// CSS to reset some browser defaults:
&, li {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
li {
height: $star-size;
position: absolute;
}
a {
width: 100%;
height: $star-size;
display: block;
}
// Set dimenions & z-index of each star element:
@for $i from 1 through $star-count {
.star-#{$i} {
width: $i * $star-size + (($i - 1) * $star-spacing);
z-index: ($star-count + 1) - $i;
// Add hover state:
&:hover {
@include rating-background($i, $star-count, $star-size, $star-spacing);
}
}
}
}
// Mixin that sets background image based on number of stars:
@mixin rating-background($stars-on, $star-count, $star-size, $star-spacing) {
$current-star: 0; // Current iteration
$stars: (); // Comma separated list to store bg
// Go from 1 through number of stars:
@for $i from 1 through $star-count {
// Calculate background position:
$background-position: #{$current-star * $star-size + $current-star * $star-spacing} 0;
// Set star to "on" if its number is <= $stars-on:
$star-state: if($i <= $stars-on, "on", "off");
// Append to the list (comma separated):
$stars: append($stars, url("http://advancedsass.com/images/star_#{$star-state}.png") #{$background-position} / #{$star-size} no-repeat, comma);
// Increase current iteration counter:
$current-star: $current-star + 1;
}
// Output the background image:
background: $stars;
}
// Use this to add a rating element (plus corresponding HTML):
.rating {
@include rating-container(
$star-count: 5,
$star-size: 40px,
$star-spacing: 10px
);
}
.rating2 {
@include rating-container(
$star-count: 8,
$star-size: 60px,
$star-spacing: 10px
);
}
Raw
SassMeister-output.css
.rating {
width: 240px;
height: 40px;
position: relative;
background: url("http://advancedsass.com/images/star_off.png") 0px 0/40px no-repeat, url("http://advancedsass.com/images/star_off.png") 50px 0/40px no-repeat, url("http://advancedsass.com/images/star_off.png") 100px 0/40px no-repeat, url("http://advancedsass.com/images/star_off.png") 150px 0/40px no-repeat, url("http://advancedsass.com/images/star_off.png") 200px 0/40px no-repeat;
}
.rating, .rating li {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
.rating li {
height: 40px;
position: absolute;
}
.rating a {
width: 100%;
height: 40px;
display: block;
}
.rating .star-1 {
width: 40px;
z-index: 5;
}
.rating .star-1:hover {
background: url("http://advancedsass.com/images/star_on.png") 0px 0/40px no-repeat, url("http://advancedsass.com/images/star_off.png") 50px 0/40px no-repeat, url("http://advancedsass.com/images/star_off.png") 100px 0/40px no-repeat, url("http://advancedsass.com/images/star_off.png") 150px 0/40px no-repeat, url("http://advancedsass.com/images/star_off.png") 200px 0/40px no-repeat;
}
.rating .star-2 {
width: 90px;
z-index: 4;
}
.rating .star-2:hover {
background: url("http://advancedsass.com/images/star_on.png") 0px 0/40px no-repeat, url("http://advancedsass.com/images/star_on.png") 50px 0/40px no-repeat, url("http://advancedsass.com/images/star_off.png") 100px 0/40px no-repeat, url("http://advancedsass.com/images/star_off.png") 150px 0/40px no-repeat, url("http://advancedsass.com/images/star_off.png") 200px 0/40px no-repeat;
}
.rating .star-3 {
width: 140px;
z-index: 3;
}
.rating .star-3:hover {
background: url("http://advancedsass.com/images/star_on.png") 0px 0/40px no-repeat, url("http://advancedsass.com/images/star_on.png") 50px 0/40px no-repeat, url("http://advancedsass.com/images/star_on.png") 100px 0/40px no-repeat, url("http://advancedsass.com/images/star_off.png") 150px 0/40px no-repeat, url("http://advancedsass.com/images/star_off.png") 200px 0/40px no-repeat;
}
.rating .star-4 {
width: 190px;
z-index: 2;
}
.rating .star-4:hover {
background: url("http://advancedsass.com/images/star_on.png") 0px 0/40px no-repeat, url("http://advancedsass.com/images/star_on.png") 50px 0/40px no-repeat, url("http://advancedsass.com/images/star_on.png") 100px 0/40px no-repeat, url("http://advancedsass.com/images/star_on.png") 150px 0/40px no-repeat, url("http://advancedsass.com/images/star_off.png") 200px 0/40px no-repeat;
}
.rating .star-5 {
width: 240px;
z-index: 1;
}
.rating .star-5:hover {
background: url("http://advancedsass.com/images/star_on.png") 0px 0/40px no-repeat, url("http://advancedsass.com/images/star_on.png") 50px 0/40px no-repeat, url("http://advancedsass.com/images/star_on.png") 100px 0/40px no-repeat, url("http://advancedsass.com/images/star_on.png") 150px 0/40px no-repeat, url("http://advancedsass.com/images/star_on.png") 200px 0/40px no-repeat;
}
.rating2 {
width: 550px;
height: 60px;
position: relative;
background: url("http://advancedsass.com/images/star_off.png") 0px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 70px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 140px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 210px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 280px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 350px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 420px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 490px 0/60px no-repeat;
}
.rating2, .rating2 li {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
.rating2 li {
height: 60px;
position: absolute;
}
.rating2 a {
width: 100%;
height: 60px;
display: block;
}
.rating2 .star-1 {
width: 60px;
z-index: 8;
}
.rating2 .star-1:hover {
background: url("http://advancedsass.com/images/star_on.png") 0px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 70px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 140px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 210px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 280px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 350px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 420px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 490px 0/60px no-repeat;
}
.rating2 .star-2 {
width: 130px;
z-index: 7;
}
.rating2 .star-2:hover {
background: url("http://advancedsass.com/images/star_on.png") 0px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 70px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 140px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 210px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 280px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 350px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 420px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 490px 0/60px no-repeat;
}
.rating2 .star-3 {
width: 200px;
z-index: 6;
}
.rating2 .star-3:hover {
background: url("http://advancedsass.com/images/star_on.png") 0px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 70px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 140px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 210px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 280px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 350px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 420px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 490px 0/60px no-repeat;
}
.rating2 .star-4 {
width: 270px;
z-index: 5;
}
.rating2 .star-4:hover {
background: url("http://advancedsass.com/images/star_on.png") 0px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 70px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 140px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 210px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 280px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 350px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 420px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 490px 0/60px no-repeat;
}
.rating2 .star-5 {
width: 340px;
z-index: 4;
}
.rating2 .star-5:hover {
background: url("http://advancedsass.com/images/star_on.png") 0px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 70px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 140px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 210px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 280px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 350px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 420px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 490px 0/60px no-repeat;
}
.rating2 .star-6 {
width: 410px;
z-index: 3;
}
.rating2 .star-6:hover {
background: url("http://advancedsass.com/images/star_on.png") 0px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 70px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 140px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 210px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 280px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 350px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 420px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 490px 0/60px no-repeat;
}
.rating2 .star-7 {
width: 480px;
z-index: 2;
}
.rating2 .star-7:hover {
background: url("http://advancedsass.com/images/star_on.png") 0px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 70px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 140px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 210px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 280px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 350px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 420px 0/60px no-repeat, url("http://advancedsass.com/images/star_off.png") 490px 0/60px no-repeat;
}
.rating2 .star-8 {
width: 550px;
z-index: 1;
}
.rating2 .star-8:hover {
background: url("http://advancedsass.com/images/star_on.png") 0px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 70px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 140px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 210px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 280px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 350px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 420px 0/60px no-repeat, url("http://advancedsass.com/images/star_on.png") 490px 0/60px no-repeat;
}
Raw
SassMeister-rendered.html
<ul class="rating">
<li class="star-1"><a href="#1">1 star</a></li>
<li class="star-2"><a href="#2">2 stars</a></li>
<li class="star-3"><a href="#3">3 stars</a></li>
<li class="star-4"><a href="#4">4 stars</a></li>
<li class="star-5"><a href="#5">5 stars</a></li>
</ul>
<ul class="rating2">
<li class="star-1"><a href="#1">1 star</a></li>
<li class="star-2"><a href="#2">2 stars</a></li>
<li class="star-3"><a href="#3">3 stars</a></li>
<li class="star-4"><a href="#4">4 stars</a></li>
<li class="star-5"><a href="#5">5 stars</a></li>
<li class="star-6"><a href="#6">6 stars</a></li>
<li class="star-7"><a href="#7">7 stars</a></li>
<li class="star-8"><a href="#8">8 stars</a></li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment