带有视网膜精灵表选项的SASS/指南针精灵混入
我正在尝试使用sass/Compass编写一个mixin,它将利用常规大小图像和@2x/@3x对应图像的可用spring函数。这就是我到目前为止所做的:带有视网膜精灵表选项的SASS/指南针精灵混入,sass,compass,Sass,Compass,我正在尝试使用sass/Compass编写一个mixin,它将利用常规大小图像和@2x/@3x对应图像的可用spring函数。这就是我到目前为止所做的: // including the three sprite maps $icons : sprite-map("icons/*.png") $icons2x : sprite-map("icons@2x/*.png") $icons3x : sprite-map("icons@3x/*.png") // the m
// 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/
文件夹下载文件)
- (分隔两个不同文件夹中的文件)
- (保存1个请求)