A sass function to generate retina media queries.

Sass Retina Query Mixin

/* Update: 5/3/14 - supports IE9+, FF3.5+, Opera9.5+ */

@mixin retina($query: null, $density: 2) {
  $dpi: $density * 96;
  
  /* Accepts optional @media query conditions */
  @if $query {
    $query: "and (#{$query})";
  }
  @else {
    $query: "";
  }

  @media
    #{"only screen " + $query + " and (-webkit-min-device-pixel-ratio: " + $density + ")"},
    #{"only screen " + $query + " and (min-resolution: " + $dpi + "dpi)"},
    #{"only screen " + $query + " and (min-resolution: " + $density + "dppx)"} {
      @content;
    }
}
/* " */

/*** Basic Usage for targeting only 2dppx / 192dpi devices: ***/
@include retina() {
	.your-nifty-selector {
		opacity: 1;
		background: red
	}
}

/*** Including additional @media query conditions with each density condition ***/
@include retina("min-width: 640em", 1.5) {
	.more-selector-fun {
		color: red;
	}
}

/*** Just changing device density query: ***/
@include retina(null, 1.5) {
	.more-selector-fun {
		color: red;
	}
}

/*** Using string interpolation to do cool stuff with Zurb's Foundation Framework: ***/
@include retina("min-width: #{lower-bound($medium-range)}") {
	.that-parameter-is-interpolated {
		content: 'Holy Smokes!'
	}
}

/* Based on code by Brett Jankord */
/* http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries */