Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="test">TEST</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

/// device map
/// format: device: ( width (smaller dimension), height (larger dimension ), ratio (optional)
$devices: (
	'iPad': ( width: 768px, length: 1024px, minratio: 1 ),
	'iPadR': ( width: 768px, length: 1024px, minratio: 2),
	'iPhone': ( width: 320px, length: 480px, minratio: 1 ),
	'iPhone4': ( width: 320px, length: 480px, minratio: 2 ),
	'iPhone5': ( width: 320px, length: 568px, minratio: 2 ),
	'iPhone6': ( width: 375px, length: 667px, minratio: 2 ),
	'iPhone6+': ( width: 414px, length: 736px, minratio: 3 ),
);


/// Mixin to create a device-specific media query
///
///		@example scss
///		@include device( 'iPad', ){
///			width: 200px
///		}
///	@param {String} $device - the case-sensitive name of the device.
/// @param {String} $orientation [both] - Specify orientation. Allowed values are 'both', 'landscape', 'protrait'

@mixin device( $device, $orientation: 'both' ) {
	@if map-has-key($devices, $device) {
		$device: map-get($devices, $device);

		$width: if( map-get( $device, width ), 'only screen and ( min-device-width : #{map-get($device, width)} )', ''  );
		$length: if( map-get( $device, length ), ' and ( max-device-width : #{map-get($device, length)} )', ''  );
		$min-ratio: if( map-get( $device, minratio ), ' and ( -webkit-min-device-pixel-ratio: #{map-get($device, minratio)} )', '' );
		$max-ratio: if( map-get( $device, maxratio ), ' and ( -webkit-max-device-pixel-ratio: #{map-get($device, maxratio)} )', '' );
		$orientation: if( $orientation not 'landscape' and $orientation not 'protrait', ' and ( orientation:#{$orientation} )', '' );

		@media #{ $width + $length + $min-ratio + $max-ratio + $orientation } {
			@content;
		}
	} @else {
		@warn "No value could be retrieved for `#{$device}`. Please make sure it is defined in the `$devices` map.";
	}
}


//test it
.test {
	background-color: white;

	// iPhone 5
	@include device( 'iPhone5' ) {
		background-color: pink;
	}

	// iPad with portrait orientation.
	@include device( 'iPad', 'portrait' ) {
		background-color: aliceblue;
	}

	// iPad with landscape orientation.
	@include device( 'iPad', 'landscape' ) {
		background-color: cornsilk;
	}
}

SassMeister-output.css

.test {
  background-color: white;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: both) {
  .test {
    background-color: pink;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) {
  .test {
    background-color: aliceblue;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {
  .test {
    background-color: cornsilk;
  }
}

SassMeister-rendered.html

<div class="test">TEST</div>

Sassmeister link: http://sassmeister.com/gist/Camwyn/bf80003222c4f18b3a1a