chriseppstein/1_sprites.scss

## 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);
}

## 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; }

## 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>

## sprites.png

      
    Raw
  

              sprites.png
	@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);
	}
	.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; }
	<!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>