Skip to content

Instantly share code, notes, and snippets.

@AdmireNL

AdmireNL/SassMeister-input-HTML.html

Last active August 29, 2015 14:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AdmireNL/8703871b8485b8da18a2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AdmireNL/8703871b8485b8da18a2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. AdmireNL revised this gist Mar 1, 2015. 1 changed file with 15 additions and 1 deletion.
    16 changes: 15 additions & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,4 +3,18 @@
    // Compass (v1.0.3)
    // ----

    // For loop sprite coordinates$star-width: 50px;.rating { width: 240px; height: 38px; margin-bottom: 50px; background: url("http://imgh.us/stars.svg") no-repeat; background-position: 0 0; @for $i from 0 through 5 { &.rating-#{$i} { background-position: -((5-$i) * $star-width) 0; } }}
    // For loop sprite coordinates
    $star-width: 50px;

    .rating {
    width: 240px;
    height: 38px;
    margin-bottom: 50px;
    background: url("http://imgh.us/stars.svg") no-repeat;
    background-position: 0 0;
    @for $i from 0 through 5 {
    &.rating-#{$i} {
    background-position: -((5-$i) * $star-width) 0;
    }
    }
    }
  2. AdmireNL created this gist Mar 1, 2015.
    6 changes: 6 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <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>
    6 changes: 6 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    // ----
    // Sass (v3.4.12)
    // Compass (v1.0.3)
    // ----

    // For loop sprite coordinates$star-width: 50px;.rating { width: 240px; height: 38px; margin-bottom: 50px; background: url("http://imgh.us/stars.svg") no-repeat; background-position: 0 0; @for $i from 0 through 5 { &.rating-#{$i} { background-position: -((5-$i) * $star-width) 0; } }}
    25 changes: 25 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    .rating {
    width: 240px;
    height: 38px;
    margin-bottom: 50px;
    background: url("http://imgh.us/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;
    }
    6 changes: 6 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <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>