Sprite Mixin Example

sprite-mixins.scss

//Rough Mixin Example
//Background position coordinates is shorthand X, Y.
@mixin sprites($coor1, $coor2, $coor3, $coor4, $coor5, $coor6, $height, $width) {
	background: url(images/sprite.jpg) $coor1 $coor2;
	display: block;
	height: $height;
	width: $width;
	&:hover {
		background-position: $coor3 $coor4;
	}
	&:active {
		background-position: $coor5 $coor6;
	}
}

//Implimentation Example
//At first it looks confusing but soon you will get the pattern.
.example-sprite {
	@include sprites(0,0,0,100px,0,200px,100px,100px);
}

.example-sprite2 {
	@include sprites(100px,0,100px,100px,100px,200px,100px,100px);
}


// Output:
// .example-sprite { background: url(images/sprite.jpg) 0 0; display: block; height: 100px; width: 100px; }
// .example-sprite:hover { background-position: 0 100px; }
// .example-sprite:active { background-position: 0 200px; }

// .example-sprite2 { background: url(images/sprite.jpg) 100px 0; display: block; height: 100px; width: 100px; }
// .example-sprite2:hover { background-position: 100px 100px; }
// .example-sprite2:active { background-position: 100px 200px; }