Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$ieSprite: '.lt-ie9' !default;
$baseFontSize: 16px !default;

// Converts px to em
@function mq-px2em($px, $base-font-size: $baseFontSize) {
	@if (unitless($px)) {
		@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
		@return mq-px2em($px + 0px); // That may fail.
	} @else if (unit($px) == em) {
		@return $px;
	}
	@return ($px / $base-font-size) * 1em;
}

// Gets an attribute from the sass map
// Added: spriteMap option
@function sprite-attr($spriteMap, $icon, $attr) {
	$icon: map-get($spriteMap, $icon);
	@return map-get($icon, $attr);
}

// Added: spriteMap option
@function icon-attr($spriteMap, $icon) {
	$attr: (
		width: sprite-attr($spriteMap, $icon, width),
		height: sprite-attr($spriteMap, $icon, height),
		x: sprite-attr($spriteMap, $icon, backgroundX),
		y: sprite-attr($spriteMap, $icon, backgroundY)
	);

	@return $attr;
}

// IE Sprite Mixin for when rotation is used
// Added: spriteMap option
// Removed: extend
@mixin ie-sprite($spriteMap, $icon, $type: all) {
	
	$sprite: map-get($spriteMap, sprite);
	$iconMap: icon-attr($spriteMap, $icon);
	
	@if $ieSprite {
		#{$ieSprite} & {
			@if $type == all {
				// Shares the PNG background
				background-image: url(map-get($sprite, pngPath));
			}
			// Outputs dimensions of icon
			@if $type == all or $type == size {
				width: map-get($iconMap, width);
				height: map-get($iconMap, height);
			}
			// Outputs background position
			@if $type == all or $type == bg {
				background-position: (map-get($iconMap, x)) (map-get($iconMap, y));
			}
		}
	}
}

// For use with the gulp sprite plugin
// Added: spriteMap option
// Removed: extend
@mixin sprite($spriteMap, $icon, $type: all) {
	$sprite: map-get($spriteMap, sprite);
	
	@if $type == all {
		// Shares the backgrounds
		display: inline-block;
		background-image: url(map-get($sprite, svgPath));
		background-size: mq-px2em(map-get($sprite, width)) mq-px2em(map-get($sprite, height));
	}

	$iconMap: icon-attr($spriteMap, $icon);

	// Outputs dimensions in em
	@if $type == all or $type == size {
		width: mq-px2em(map-get($iconMap, width) + 1);
		height: mq-px2em(map-get($iconMap, height) + 1);
	}

	// Outputs background position in em
	@if $type == all or $type == bg {
		background-position: mq-px2em(map-get($iconMap, x)) mq-px2em(map-get($iconMap, y));
	}

	// Add ie fallback
	@include ie-sprite($spriteMap, $icon, $type);

}

// Example
$iconsOne: (
	sprite: (width: 104px, height: 96px, pngPath: '../img/sprite.png', svgPath: '../img/sprite.svg'),
	facebook: (width: 10px, height: 22px, backgroundX: 0px, backgroundY: 0px),
	twitter: (width: 32px, height: 22px, backgroundX: -20px, backgroundY: -32px),
	twitterHover: (width: 32px, height: 22px, backgroundX: -62px, backgroundY: -64px),
);

$iconsTwo: (
	sprite: (width: 104px, height: 96px, pngPath: '../img/sprite.png', svgPath: '../img/sprite.svg'),
	facebookTwo: (width: 10px, height: 22px, backgroundX: 0px, backgroundY: 0px),
	twitterTwo: (width: 32px, height: 22px, backgroundX: -20px, backgroundY: -32px),
	twitterHoverTwo: (width: 32px, height: 22px, backgroundX: -62px, backgroundY: -64px),
);

.class {
	@include sprite($iconsOne, facebook);
}

.classTwo {
	@include sprite($iconsTwo, twitterTwo, bg);
}

SassMeister-output.css

.class {
  display: inline-block;
  background-image: url("../img/sprite.svg");
  background-size: 6.5em 6em;
  width: 0.6875em;
  height: 1.4375em;
  background-position: 0em 0em;
}
.lt-ie9 .class {
  background-image: url("../img/sprite.png");
  width: 10px;
  height: 22px;
  background-position: 0px 0px;
}

.classTwo {
  background-position: -1.25em -2em;
}
.lt-ie9 .classTwo {
  background-position: -20px -32px;
}