Skip to content

Instantly share code, notes, and snippets.

@gavinmcfarland
Created January 18, 2013 13:50
Show Gist options
  • Select an option

  • Save gavinmcfarland/4564657 to your computer and use it in GitHub Desktop.

Select an option

Save gavinmcfarland/4564657 to your computer and use it in GitHub Desktop.
A mixin for SASS that uses background sizing to help you create icons from a sprite.
@mixin icon($index, $size) {
line-height: 1;
vertical-align: middle;
&:before {
// Manually define the icon set */
$columns: 5; // Number of icons going across
background-image: url(icons/large/sprite.png);
background-size: $columns * 100%;
// Size icon will be displayed */
width: #{$size}px;
height: #{$size}px;
// Position background-image based on number of icons in sprite */
background-position: #{(100/($columns - 1)*($index - 1))}% 0;
// Set position to inline */
content: "";
margin-right: #{$size/4}px;
display: inline-block;
line-height: #{$size}px;
vertical-align: middle;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment