// retina.sass // A helper mixin for applying high-resolution background images (www.retinajs.com)
// Submitted by Nathan Crank // nathancrank.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 {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