Skip to content

Instantly share code, notes, and snippets.

@chriseppstein

chriseppstein/1_sprites.scss

Created December 20, 2010 03:29
Show Gist options
  • Save chriseppstein/747982 to your computer and use it in GitHub Desktop.
Save chriseppstein/747982 to your computer and use it in GitHub Desktop.
Download ZIP
Spriting is so freaking easy now.
Raw
1_sprites.scss
@import "flag/*.png";
@import "emblem/*.png";
.flag-sprite {
width: image-width("flag/us.png");
height: image-height("flag/us.png");
padding: 0;
}
.emblem-sprite {
width: image-width("emblem/favorite.png");
height: image-height("emblem/favorite.png");
padding: 0;
}
#flags {
// There's about 250 flags in the flag sprite map, but we only want css for 9 of them:
@include sprites($flag-sprites,
us de ca au cn cz nz jp scotland tw rs gb,
$flag-sprite-base-class,
$prefix: false);
}
#emblems {
// We don't need a prefix because of the scope.
@include all-emblem-sprites($prefix: false);
}
Raw
2_sprites_output.css
.flag-sprite, #flags .us, #flags .de, #flags .ca, #flags .au, #flags .cn, #flags .cz, #flags .nz, #flags .jp, #flags .scotland, #flags .tw, #flags .rs, #flags .gb { background: url('../images/flag-03c3b29b35.png') no-repeat; }
.emblem-sprite, #emblems .favorite, #emblems .important, #emblems .photos, #emblems .readonly, #emblems .symbolic-link, #emblems .system, #emblems .unreadable { background: url('../images/emblem-a043c4f148.png') no-repeat; }
.flag-sprite, #flags .us, #flags .de, #flags .ca, #flags .au, #flags .cn, #flags .cz, #flags .nz, #flags .jp, #flags .scotland, #flags .tw, #flags .rs, #flags .gb { width: 16px; height: 11px; padding: 0; }
.emblem-sprite, #emblems .favorite, #emblems .important, #emblems .photos, #emblems .readonly, #emblems .symbolic-link, #emblems .system, #emblems .unreadable { width: 22px; height: 22px; padding: 0; }
#flags .us { background-position: 0 -2520px; }
#flags .de { background-position: 0 -605px; }
#flags .ca { background-position: 0 -385px; }
#flags .au { background-position: 0 -132px; }
#flags .cn { background-position: 0 -506px; }
#flags .cz { background-position: 0 -594px; }
#flags .nz { background-position: 0 -1849px; }
#flags .jp { background-position: 0 -1232px; }
#flags .scotland { background-position: 0 -2124px; }
#flags .tw { background-position: 0 -2465px; }
#flags .rs { background-position: 0 -2058px; }
#flags .gb { background-position: 0 -858px; }
#emblems .favorite { background-position: 0 0; }
#emblems .important { background-position: 0 -22px; }
#emblems .photos { background-position: 0 -44px; }
#emblems .readonly { background-position: 0 -66px; }
#emblems .symbolic-link { background-position: 0 -88px; }
#emblems .system { background-position: 0 -110px; }
#emblems .unreadable { background-position: 0 -132px; }
Raw
sprites.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href='stylesheets/sprites.css' rel='stylesheet' type='text/css' />
</head>
<body>
<h1>Flags</h1>
<table id='flags'>
<tr>
<td class='us'></td>
<td class='de'></td>
<td class='ca'></td>
</tr>
<tr>
<td class='au'></td>
<td class='cn'></td>
<td class='cz'></td>
</tr>
<tr>
<td class='nz'></td>
<td class='jp'></td>
<td class='scotland'></td>
</tr>
<tr>
<td class='tw'></td>
<td class='rs'></td>
<td class='gb'></td>
</tr>
</table>
<h1>Emblems</h1>
<table id='emblems'>
<tr>
<td class='favorite'></td>
<td class='important'></td>
<td class='photos'></td>
</tr>
<tr>
<td class='readonly'></td>
<td class='symbolic-link'></td>
<td class='system'></td>
</tr>
<tr>
<td class='unreadable'></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment