SASS/Compass sprite mixin with retina sprite-sheet option

Question

我正在嘗試使用sass/Compass編寫mixin，它將使用可用於普通大小的圖像和它們的@ 2x/@ 3x對應的spriting函數。這是我迄今爲止所做的：

// including the three sprite maps 
$icons  : sprite-map("icons/*.png") 
$icons2x : sprite-map("icons@2x/*.png") 
$icons3x : sprite-map("icons@3x/*.png") 

// the mixin 
=retina-spritebox($name, $map: $icons, $rmap2x: $icons2x, $rmap3x: $icons3x, $display: block, $bg-color: transparent) 
    display: #{$display} 
    text-indent: -9999px 
    overflow: hidden 
    background: $bg-color $map sprite-position($map, $name) 
    +sprite-dimensions($map, $name) 

    @media only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) 
     background: $rmap2x nth(sprite-position($rmap2x, $name), 1)/2 nth(sprite-position($rmap2x, $name), 2)/2 
     background-size: image-width(sprite-path($rmap2x))/2 image-height(sprite-path($rmap2x))/2 

    @media only screen and (min--moz-device-pixel-ratio: 2.5), only screen and (-o-min-device-pixel-ratio: 5/2), only screen and (-webkit-min-device-pixel-ratio: 2.5), only screen and (min-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx) 
     background: $rmap3x nth(sprite-position($rmap3x, $name), 1)/3 nth(sprite-position($rmap3x, $name), 2)/3 
     background-size: image-width(sprite-path($rmap3x))/3 image-height(sprite-path($rmap3x))/3 

一切都按預期工作 - 除了在這些媒體查詢中發生的事情。我試圖將@ 2x精靈表的寬度和精靈的x/y座標除以2，但似乎沒有任何方法可以確保精靈表的寬度或者座標精靈將永遠整齊地被2整除。

我意識到我可以只包含@ 2x圖像，但這會減少使用精靈表的性能增益。

解決方案將不勝感激。 （如果您不使用bower下載從src/文件夾中的文件）

Answer 1

嘗試任何這兩個

• https://github.com/Gaya/Retina-Sprites-for-Compass（在兩個不同的文件夾中的文件分離）
• https://github.com/pixelmord/Retina-Sprites-for-Compass（節省1項要求）