Retina background image. Uses a $retina-suffix variables for retina & normal image files

_retina-bg.scss

/* @author Bilal Cinarli */

/** -------------------------------------------
    Media Query Mixins
    ------------------------------------------- **/
/**
 * Retina Image
 */
@mixin retina-image($image, $ext: 'png'){
    background-image: url('#{$images}#{$image}.#{$ext}');

    @include retina(){
        background-image: url('#{$images}#{$image}#{$retina-suffix}.#{$ext}');
    }
}

/**
 * Retina
 */
@mixin retina($ratio: 1.5){
    $dpi: 96*$ratio;

    @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
           only screen and (min--moz-device-pixel-ratio: $ratio),
           only screen and (-o-min-device-pixel-ratio: $ratio/1),
           only screen and (min-resolution: #{$dpi}dpi),
           only screen and (min-resolution: #{$ratio}dppx) {
        @content;
    }
}