1
일반 크기 이미지와 @ 2x/@ 3x 사본 모두에 사용할 수있는 스프라이트 함수를 사용하는 sass/Compass를 사용하여 믹스 인을 작성하려고합니다. 이것은 내가 지금까지 해왔 던 것입니다 :retina 스프라이트 시트 옵션이있는 SASS/Compass 스프라이트 믹스
// including the three sprite maps
$icons : sprite-map("icons/*.png")
$icons2x : sprite-map("[email protected]/*.png")
$icons3x : sprite-map("[email protected]/*.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로 나누는 방법이없는 것 같습니다. 스프라이트는 항상 2로 깔끔하게 나눌 수 있습니다.
대신 @ 2x 이미지를 포함 할 수 있지만 스프라이트 시트를 사용하면 성능이 향상 될 수 있습니다.
해결책은 크게 감사하겠습니다. (당신이 src/ 폴더에서 bower 다운로드에게 파일을 사용하지 않는 경우)
고마워, 나는 그것들을 살펴볼 것이다. 그러나 나는 플러그인에 대한 링크가 아니라 위의 코드에 대한 피드백을 정말로 찾고있다. – Sceletia