Retina Image for Utility Pro using Sass

_header-scss

/* Logo, hide text */

.header-image .site-title > a {
	@include imgRetina(images/logo, png, 300px, 60px, center);
	float: left;
	min-height: 80px;
	width: 100%;
    	@include media($medium-screen-up) {
      	@include imgRetina(images/logo, png, 300px, 60px, left);
	
    }
}	

_mixin-scss

/* mixins 
* Generates the image in either standard size or retina display version
*/
@mixin imgRetina($image, $extension, $width, $height, $position: center, $repeat: no-repeat) {
     background: url($image + '.' + $extension) $repeat $position;
          
     @media 
     screen and (-webkit-min-device-pixel-ratio: 2),
     screen and (   min--moz-device-pixel-ratio: 2),
     screen and (   -moz-min-device-pixel-ratio: 2),
     screen and (     -o-min-device-pixel-ratio: 2/1),
     screen and (        min-device-pixel-ratio: 2),
     screen and (             min-resolution: 192dpi), 
     screen and (             min-resolution: 2dppx) {    
        background: url($image + '@2x' + '.' + $extension) $repeat $position;
        background-size: $width $height;
     }
}

final-footer-1-css

.footer-widgets-1 .bg-image-1 {
  border-radius: 50%;
  background: url(images/waterlily.jpg) center no-repeat;
  height: 200px;
  width: 200px;
  margin: 10px auto;
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
  .footer-widgets-1 .bg-image-1 {
    background: url(images/waterlily@2x.jpg) center no-repeat;
    background-size: 200px 200px;
  }
}

final-header-css

/* Logo, hide text */
.header-image .site-title > a {
  background: url(images/logo.png) no-repeat center;
  float: left;
  min-height: 80px;
  width: 100%;
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
  .header-image .site-title > a {
    background: url(images/logo@2x.png) no-repeat center;
    background-size: 300px 60px;
  }
}
@media screen and (min-width: 1023px) {
  .header-image .site-title > a {
    background: url(images/logo.png) no-repeat left;
  }
}
@media screen and (min-width: 1023px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 1023px) and (min--moz-device-pixel-ratio: 2), screen and (min-width: 1023px) and (-moz-min-device-pixel-ratio: 2), screen and (min-width: 1023px) and (min-device-pixel-ratio: 2), screen and (min-width: 1023px) and (min-resolution: 192dpi), screen and (min-width: 1023px) and (min-resolution: 2dppx) {
  .header-image .site-title > a {
    background: url(images/logo@2x.png) no-repeat left;
    background-size: 300px 60px;
  }
}

footer_widgets-scss

.footer-widgets-1 .bg-image-1 {
	border-radius: 50%;
	@include imgRetina(images/waterlily, jpg, 200px, 200px, no-repeat, center);
	height: 200px;
	width: 200px;
	margin: 10px auto;
}

original_header-scss

/* Logo, hide text */

.header-image .site-title > a {
	background: url(images/logo.png) no-repeat center;
	float: left;
	min-height: 60px;
	width: 100%;

	@include media($medium-screen-up) {
		background: url(images/logo.png) no-repeat left;
	}
}

style-scss

/* Resets
---------------------------------------------------------------------------------------------------- */
@import "partials/reset";

/* # Variables
---------------------------------------------------------------------------------------------------- */
@import "partials/variables";

/* Mixins
---------------------------------------------------------------------------------------------------- */
@import "partials/mixins";