This is a quick helper function to make it easier to maintain regular and retina images in web sites/apps.
It works on a similar principle to how XCode manages images for iOS development. If you have an image called
icon.png, first add another image with twice the height and width to the same directory and call it
Next use the helper mixin provided by this extension:
At its simplest this will generate:
But if you also have the
@2x image it will generate the require CSS (and a wrapping media query) to provide support for the double size graphics as well:
background-size: 50% auto; background-image: url('firstname.lastname@example.org?1323184535');
There is also a second helper mixin to inline the images instead of link to them:
Both functions first check for the existence of the
@2x graphics and won't fall over if they don't exist, it just won't output the retina CSS.
Move the folder containing this README into your compass directory (rename it to
Add the following to your
retina_ext = File.join(File.dirname(__FILE__), 'retina') require File.join(retina_ext, 'lib', 'sass_extensions.rb') add_import_path File.join(retina_ext, 'stylesheets')
Import the mixins into your stylesheet