Allows you to use retina images at various pixel densities on Contentful.

contentful-retina.scss

/**
 * Allows you to use retina images at various pixel densities on Contentful.
 * Note: you will need to upload the highest resolution!
 * Examples:
 *
 *   @include retina("/images/mypic.jpg", 2);
 *   @include retina("/images/mypic.jpg", 3, 100px 100px, left top no-repeat transparent);
 *
 * @param  {Value}  $path               The path to the file name.
 * @param  {Value}  $base_size          The base size to start with. Will at least create @1x and @2x and more if cap is 3 or higher
 * @param  {Number} $cap:    2          The highest pixel density level images exist for.
 * @param  {Value}  $size:   auto auto  The intended width of the rendered image.
 * @param  {Value}  $extras: null       Any other `background` values to be added.
 */
@mixin contentful_retina($path, $base_size, $cap: 2, $size: auto auto, $extras: null) {
    $base: "http://images.contentful.com/";
    background: url("#{$base}#{$path}?w=#{$base_size}") $extras;
    background-size: $size;

    $at2x_path: "#{$base}#{$path}?w=#{$base_size * 2}";
    @media all and (-webkit-min-device-pixel-ratio : 1.5),
         all and (-o-min-device-pixel-ratio: 3/2),
         all and (min--moz-device-pixel-ratio: 1.5),
         all and (min-device-pixel-ratio: 1.5) {
            background      : url("#{$at2x_path}") $extras;
            background-size : $size;
    }

    @if $cap >= 2 {
        @for $env from 2 through $cap {
            $media_path: "#{$base}#{$path}?w=#{$base_size * $env}";
            @media (-webkit-min-device-pixel-ratio: $env),
                   (min-resolution: $env * 96dpi) {
                        background      : url($media_path) $extras;
                        background-size : $size;
            }
        }
    }
}