_retina.sass

// retina.sass
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)

// Submitted by Nathan Crank
// nathancrank.com

// Updated by John Newman
// github.com/jgnewman
// http://axial.agency

/**
 * Allows you to use retina images at various pixel densities.
 * Examples:
 *
 *   +retina(/images/mypic.jpg, 2);
 *   +retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
 *
 * @param  {Value}  $path               The path to the file name minus extension.
 * @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.
 */
=retina($path, $cap: 2, $size: auto auto, $extras: null)

  // Set a counter and get the length of the image path.
  $position: -1
  $strpath: '#{$path}'
  $length: str-length($strpath)

  // Loop ver the image path and figure out the
  // position of the dot where the extension begins.
  @for $i from $length through $length - 10
    @if $position == -1
      $char: str-slice($strpath, $i,$i)
      @if str-index($char, ".") == 1
        $position: $i

  // If we were able to figure out where the extension is,
  // slice the path into a base and an extension. Use that to
  // calculate urls for different density environments. Set
  // values for different environments.
  @if $position != -1
    $ext: str-slice($strpath, $position + 1, $length)
    $base: str-slice($strpath, 1 ,$position - 1)
    $at1x_path: "#{$base}.#{$ext}"
    $at2x_path: "#{$base}@2x.#{$ext}"

    // Set a base background for 1x environments.
    background: url("#{$at1x_path}") $extras
    background-size: $size

    // Create an @2x-ish media query.
    @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

    // Create media queries for all environments that the user has
    // provided images for.
    @if $cap >= 2
      @for $env from 2 through $cap
        $suffix: "@#{$env}x"
        @media (-webkit-min-device-pixel-ratio: $env), (min-resolution: $env * 96dpi)
          background: url("#{$base}#{$suffix}.#{$ext}") $extras
          background-size: $size

  @else
    background: url("#{$path}") $extras
    background-size: $size