Skip to content

Instantly share code, notes, and snippets.

@andrewrocco
Last active December 14, 2015 19:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrewrocco/5135418 to your computer and use it in GitHub Desktop.
Save andrewrocco/5135418 to your computer and use it in GitHub Desktop.
I found a cool way to iterate through a list and apply some styles, in this case with a bunch of social network icons! The sprite in question is a vertical one. If it was a grid, a matrix may be necessary to iterate in two dimensions. This all assumes all icons have uniform dimensions.
// Setting Networks in sprite order from top to bottom
$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 );
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment