Skip to content

Instantly share code, notes, and snippets.

@andrewrocco

andrewrocco/working-with-sprites.scss

Last active December 14, 2015 19:18
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save andrewrocco/5135418 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. andrewrocco revised this gist Mar 11, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions working-with-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    // Setting Networks in Sprite Order
    // Setting Networks in sprite order from top to bottom
    $networks: youtube, blogger, dribbble, email, facebook, twitter;

    // Setting background sprite (separated for readability
    // Setting background sprite (separated for readability)
    .social-icons li a { background: url(icon-sprite.png) no-repeat 0 0; }

    // Iterating and multiplying!
  2. andrewrocco revised this gist Mar 11, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion working-with-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ $networks: youtube, blogger, dribbble, email, facebook, twitter;

    // Iterate through the 'networks' array
    @for $i from 0 to length($networks) {
    &.#{nth($networks, $i+1)} a {
    &.#{nth($networks, $i + 1)} a {
    background-position: 0 ( -$i * $iconHeight );
    }
    }
  3. andrewrocco created this gist Mar 11, 2013.
    20 changes: 20 additions & 0 deletions working-with-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    // Setting Networks in Sprite Order
    $networks: youtube, blogger, dribbble, email, facebook, twitter;

    // Setting background sprite (separated for readability
    .social-icons li a { background: url(icon-sprite.png) no-repeat 0 0; }

    // Iterating and multiplying!
    .social-icons {
    li {
    // Set the icon height
    $iconHeight: 32px;

    // Iterate through the 'networks' array
    @for $i from 0 to length($networks) {
    &.#{nth($networks, $i+1)} a {
    background-position: 0 ( -$i * $iconHeight );
    }
    }
    }
    }