Putting the high resolution alternative in the same rule as the normal image instead of putting it in a separate @media query rule or in different stylesheet altogether is a big win in terms of clarity in our CSS. It’s easier to read, easier to understand and easier to maintain.

The mixin not only makes development easier, but it centralizes the definition of high resolution displays so it can easily be changed globally as more devices come to market. The @media query is based on the one in Thomas Fuchs’ Retinafy book but, for example, we’ve already modified it to define the Google Nexus 7 with it’s 1.3 pixel ratio as a retina-capable device.

Purists of hand-crafted CSS may rail that this method results in the rule being repeated in the compiled CSS each time we use this mixin and that’s true. Basecamp is light on images so we’re talking about a handful of repetitions, not dozens or hundreds. It also seems likely that as SCSS continues to improve, these rules will be smartly combined. For now that trade-off is worth the improved clarity and convenience in our code.

If you wanted to get very fancy you could write a function to take one image name, parse it, and generate the 2x image name automagically. That way, you’d only ever need to pass one image name into the mixin.

mezza

ali

on 11 Oct 12

Another solution for Compass users is this helper and mixin which automatically applies the retina CSS if a file is found with a ’@2x’ suffix. It also takes advantage of the image-width helpers that the above comment mentions.

A critical thing to remember is that this can become very inefficient if you are using it in many places, as sass’s implementation currently just pulls the media query repeatedly out of the current selector, rather than looking through and combining media queries into blocks for each resolution.