_sprites.scss

/* Exemple avec un sprite d'icônes */
$icon: sprite-map("bg/icon/*.png",
	 $layout: smart
);
$icon2x: sprite-map("bg/icon2x/*.png",
	 $layout: smart
);

@mixin icon-sprite($sprite, $from: $base-font-size, $offset-x: 0, $offset-y: 0){
	@include _use-sprite($icon, $icon2x, $sprite, $from, $offset-x, $offset-y);
}


/* Exemple en mode vertical avec du spacing */
$vertical: sprite-map("bg/vertical/*.png",
	 $layout: vertical,
	 $spacing: 24px,
         $vertical-imagename_position:100% //exemple position image à droite
);
$vertical2x: sprite-map("bg/vertical2x/*.png",
	 $layout: smart,
	 $spacing: 48px
);

@mixin vertical-sprite($sprite, $from: $base-font-size, $offset-x: 0, $offset-y: 0){
	@include _use-sprite($vertical, $vertical2x, $sprite, $from, $offset-x, $offset-y);
}

functions.scss

@function em($to, $from: $base-font-size)
{
    @if $grid-unit == 'px'
    {
        @return $to;
    }
    @else if $grid-unit == 'em'
    {
    	@if $to == 0
		{
			@return 0;
		}
		@else
		{
    		@return $to / $from + em;
    	}
    }
}

mixins.scss

@mixin em-sprite-position($map, $sprite, $context: $base-font-size, $offset-x: 0, $offset-y: 0, $factor: 1){
    $position: sprite-position($map, $sprite, $offset-x, $offset-y);
    $x: nth($position, 1) / $factor;
    $y: nth($position, 2) / $factor;

    @if "%" == em($offset-x){
        background-position: $offset-x em($y,$context);
    }
    @else if "%" == em($offset-y){
        background-position: em($x,$context) $offset-y;
    }
    @else{
        background-position: em($x,$context) em($y, $context);
    } 
}

@mixin em-spriteretina-position($map, $sprite, $context: $base-font-size, $offset-x: 0, $offset-y: 0){
    @include em-sprite-position($map, $sprite, $context, $offset-x, $offset-y, 2);
}
 
@mixin _use-sprite($map, $map2x, $sprite, $from:$base-font-size, $offset-x: 0, $offset-y: 0) {
    background-repeat: no-repeat;
    background-image: sprite-url($map);
    @include em-sprite-position($map, $sprite, $from, $offset-x, $offset-y);

    $mapPath: sprite-path($map);
    background-size: em(image-width($mapPath), $from) em(image-height($mapPath), $from); 

    $image: sprite-file($map, $sprite);
    width: em(image-width($image), $from);
    height: em(image-height($image), $from);
    
    @media(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        background-image: sprite-url($map2x);
        @include em-spriteretina-position($map2x, $sprite, $from, $offset-x, $offset-y);

        $mapPath2x: sprite-path($map2x);
        background-size: em(image-width($mapPath2x) / 2,$from) em(image-height($mapPath2x) / 2, $from);

        $image2x: sprite-file($map2x, $sprite);
        width: em(image-width($image2x) / 2, $from);
        height: em(image-height($image2x) / 2, $from);
    }
}