Playing with Spritesheets with Sass

spritesheet

$icon-width: 24px;
$icon-height: 24px;
$icon-tile-x: 10;
$icons: 'http://danhannigan.co.uk/social_spritesheet.png';

%social-icon {
  width: $icon-width;
  height: $icon-height;
  background-image: url($icons);
  display: block;
}

$social-icons: (
  'android', 
  'linkedin', 
  'facebook', 
  'twitter',
  'unknown_one', 
  'pinterest', 
  'youtube-play', 
  'email', 
  'unknown_two',
  'youtube', 
  'quora', 
  'unknown_three', 
  'apple', 
  'rss', 
  'tumblr'
);

@each $icon in $social-icons {
  $i: index($social-icons, $icon) - 1;
  .#{$icon} {
    @extend %social-icon;
    background-position-x: -($i * 24px);
    @if $i < $icon-tile-x {
      background-position-y: 0px;  
    } @else {
      background-position-y: $icon-width;
    }
  }
}