retina.less

// retina.less
// A helper mixin for applying high-resolution background images (http://www.retinajs.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  {String} $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: ~'') {
  @lowretina: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
  @2xpath: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;

  /*
   * Set a base background for 1x environments.
   */
  background: url(@path) @extras;
  background-size: @size;

  /*
   * Create an @2x-ish media query.
   */
  @media @lowretina {
    background      : url(@2xpath) @extras;
    background-size : @size;
  }

  /*
   * Create media queries for all environments that the user has
   * provided images for.
   */
  .create-queries() when (@cap >= 2) {
    .loop(@env) when (@env <= @cap) {
      @retinapath: ~`@{path}.replace(/\.\w+$/, function(match) { return "@@{env}x" + match; })`;
      @media (-webkit-min-device-pixel-ratio: @env),
             (min-resolution: @env * 96dpi) {
               background      : url(@retinapath) @extras;
               background-size : @size;
      }
      .loop((@env + 1));    // next iteration
    }
    .loop(2);
  }
  .create-queries();

}