// retina.less // A helper mixin for applying high-resolution background images (www.retinajs.com)
// Updated by John Newman // github.com/jgnewman // 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();
}