Sprite mixin, works perfectly with standard defines, refer to: http://www.sitepoint.com/css-techniques-for-retina-displays/

sprite_icons.scss

//Sprite mixin, works perfectly with standard defines
@mixin icons-sprite($sprite) {
    background-image: sprite-url($icons);
    background-position: sprite-position($icons, $sprite);
    background-repeat: no-repeat;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
    height: round(image-height(sprite-file($icons, $sprite)));
    width: round(image-width(sprite-file($icons, $sprite)));
    @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
        background-image: sprite-url($icons-2x);
        background-size: round(image-width(sprite-path($icons-2x)) / 2) round(image-height(sprite-path($icons-2x)) / 2);
        background-position: nth(sprite-position($icons-2x, $sprite), 1) / 2 nth(sprite-position($icons-2x, $sprite), 2) / 2;
        height: round(image-height(sprite-file($icons-2x, $sprite)) / 2);
        width: round(image-width(sprite-file($icons-2x, $sprite)) / 2);
    }
}