Retina sprite mixin loads an incorrect variable

[pushonTunde]

Within the _sprite.scss the @mixin retina-sprite mixin adds the wrong variable within the retina mixin, it adds

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @include sprite-image($retina-sprite); @include sprite-background-size($normal-sprite); }

rather it should be

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @include sprite-image($retina-sprite); @include sprite-background-size($retina-sprite); }

I've also attached an image of the full mixin

[twolfson]

Nope, we want the retina spritesheet to be the same pixel size as the normal spritesheet. To clear up the confusion, I will re-iterate how retina spritesheets work.

With normal spritesheets and non-retina laptops, images are displayed as they are. However, when we go to a retina laptop, there are more pixels in the monitor (i.e. higher pixel density). As a result, images with a low pixel density need to spread out across the same distance but don't have the same pixel values defined for the more refined values (e.g. there is a x=1px value and a x=2px value but no x=1.5px value). This is the reason for granularity in non-retina images on retina displays.

To solve this, we create a 2x larger spritesheet (e.g. we would define x=2px, x=4px and x=3px). Then, we condense it down to the same size as the 1x spritesheet -- effectively halving all the values. This winds up defining that 1.5px value.

The way we perform this in CSS is to use background-size to adjust the size of the entire spritesheet.