Sprite icons mix-in for SASS

icons.css.scss

@import "../mixins/icon";

.icon
{
	@include icon(user, 1, 1);
	@include icon(users, 2, 1);
	@include icon(subscribers, 3, 1);
	@include icon(client, 4, 1);
	@include icon(role, 5, 1);
	@include icon(roles, 6, 1);
	@include icon(mailing, 7, 1);
	@include icon(mailing-template, 8, 1);
	@include icon(mailing-templates, 9, 1);
	@include icon(subscriber-list, 10, 1);
	@include icon(settings, 11, 1);
	@include icon(dashboard, 12, 1);
	@include icon(api, 13, 1);
	@include icon(mail-settings, 14, 1);
	@include icon(link, 15, 1);
	
	@include icon(edit, 1, 7);
	@include icon(delete, 2, 7);
	@include icon(upload, 3, 7);
	@include icon(download, 4, 7);
	@include icon(logout, 5, 7);
	@include icon(back, 6, 7);
	@include icon(editor, 7, 7);
	@include icon(show, 8, 7);
	@include icon(media, 9, 7);
	
	
	&:hover { text-decoration: none; }
	&.only:before { margin-right: 0 !important; }
}

mixins.css.scss

@mixin icon($name, $left, $top)
{
	&.#{$name}-16:not(.raw)
	{
		&:before
		{
			float: left;
			content: "";
			width: 16px;
			height: 16px;
			margin-right: 8px;
		
			background-size: 300px 300px;
			background-image: image_url('icons/sprite_gray.png');
			background-position: -#{$left * 16}px -#{$top * 16}px;
		}
		
		&:hover:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 1}px; }
		&.active:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 2}px; }
		&.active.contrast:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 3}px; }
	}
	
	&.#{$name}-16.raw
	{
		width: 16px;
		height: 16px;
		
		background-size: 300px 300px;
		background-image: image_url('icons/sprite_gray.png');
		background-position: -#{$left * 16}px -#{$top * 16}px;
	}
	
	&.#{$name}-32:not(.raw)
	{
		&:before
		{
			content: "";
			width: 32px;
			height: 32px;
			
			background-size: 600px 600px;
			background-image: image_url('icons/sprite_gray.png');
			background-position: -#{$left * 32}px -#{$top * 32}px;
		}
		
		&:hover:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 1}px; }
		&.active:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 2}px; }
		&.active.contrast:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 3}px; }
	}
	
	&.#{$name}-32.raw
	{
		display: inline-block;
		width: 32px;
		height: 32px;
		
		background-size: 600px 600px;
		background-image: image_url('icons/sprite_gray.png');
		background-position: -#{$left * 32}px -#{$top * 32}px;
	}
	
}

show.html

<!-- Button with icon 16x16 only -->
<a href="subscribers/edit/1" class="button icon only edit-16"></a>

<!-- Button with icon 16x16 and text -->
<a href="subscribers/edit/1" class="button icon edit-16">edit this</a>

<!-- Button with icon 32x32 and text -->
<a href="users/1" class="button icon user-32">User 1</a>