具有视网膜精灵表选项的 SASS/指南针精灵混合

Question

我正在尝试使用 sass/Compass 编写一个 mixin，它将为常规尺寸的图像和它们的 @2x/@3x 对应物使用可用的精灵功能。这是我到目前为止所做的：

// 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 图像，但这会降低使用精灵表的性能增益。

我们将不胜感激。

Answer 1

尝试这两个中的任何一个（如果您不使用bower，请从src/ 文件夹下载文件）

• https://github.com/Gaya/Retina-Sprites-for-Compass（将文件分隔在两个不同的文件夹中）
• https://github.com/pixelmord/Retina-Sprites-for-Compass（保存 1 个请求）