/*-------------------------------------------------------------- # Retina Images # example: @include retina("logo2x.png", 100, 50); --------------------------------------------------------------*/ @mixin retina($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url("#{$image}"); background-size: $width + px $height + px; //background-size: $width / 10 + rem $height / 10 + rem; // Use this if you've set HTML font size value to 62.5% background-size: $width / 16 + rem $height / 16 + rem; } }