Mixin to do responsive sprites..Demo to follow...

example.html

<span class="logo" data-logo="examplelogo"></span>

<!-- By default the .logo element should span 100% width.
If you need it to be constrained in size use a container element with a width % value on it -->
<style>
	.logo--header {
		width: 25%;
	}
</style>
<div class="logo--header">
    <span class="logo" data-logo="examplelogo"></span>	
</div>

example.scss

[class*="logo"] {
        position: relative;
	display: block;
	&:before {
                position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: url('/path/to/img') no-repeat;
                content: '';
	}
}

[data-logo="examplelogo"] {
	@include responsive-sprite($logo-width: 250, $logo-height: 38,  $sprite-position-left: 6);
}

responsive-sprite-mixin.scss

//-- Respsonsive Sprite Generator
// Mixin to generate the code for a responsive sprite. Works with non-uniform logos in the sprite.
// Example 1: Generates respsonsive logo using default sprite width and height;
// @include responsive-sprite($logo-height: 252, $logo-width: 394, $sprite-position-top: 25, $sprite-position-left: 0)
@mixin responsive-sprite($logo-width, $logo-height, $sprite-height: 1092, $sprite-width: 337, $sprite-position-top: 0, $sprite-position-left: 0) {
	padding-bottom: percentage($logo-height/$logo-width);
	&:before {
		background-size: percentage($sprite-width/$logo-width);
		background-position: percentage($sprite-position-left /($sprite-width - $logo-width)) percentage($sprite-position-top/($sprite-height - $logo-height));
	}
}