Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

// GO TO LINE 202!

// --------------------------------------------
//	Default Variables
// --------------------------------------------

$is-responsive: true;
$site-width: 960px;

$min: unquote('min-width:');
$max: unquote('max-width:');
$min-h: unquote('min-height:');
$max-h: unquote('max-height:');

$use-background-property: true;
$use-background-fallback: true;
$use-pie-background: true;
$use-ltie9-mq-fallbacks: true;

$browser-default-font-size: 16px;
$base-font-size: 16px !default;
$rem-with-px-fallback: true !default;

// --------------------------------------------
//	Helper Functions
// --------------------------------------------

@function strip-units($number) {
	@return $number / ($number * 0 + 1);
}

@function em($pixels, $context: 16, $unitless: false) {
	@if ($unitless == false) {
		@return #{strip-units($pixels) / strip-units($context)}em;
	}
	@else {
		@return #{strip-units($pixels) / strip-units($context)};
	}
}

@function percent($pixels, $context: $site-width) {
	@return percentage($pixels / $context);
}

// @private Default font-size for all browsers
// Convert any CSS <length> or <percentage> value to any other.
@function convert-length($length, $to-unit, $from-context: $base-font-size, $to-context: $from-context) {
	$from-unit: unit($length);

	// Optimize for cases where from and to may accidentally be the same.
	@if $from-unit == $to-unit { @return $length; }
	@if unit($from-context) != 'px' { @warn "Paremeter $from-context must resolve to a value in pixel units."; }
	@if unit($to-context) != 'px' { @warn "Parameter $to-context must resolve to a value in pixel units."; }

	// Fixed ratios
	// https://developer.mozilla.org/en/CSS/length
	// http://dev.w3.org/csswg/css3-values/#absolute-lengths
	$px-per-in: 96px / 1in;
	$px-per-mm: 96px / 25.4mm;
	$px-per-cm: 96px / 2.54cm;
	$px-per-pt: 4px / 3pt;
	$px-per-pc: 16px / 1pc;

	// Variables to store actual convesion ratios
	$px-per-from-unit: 1;
	$px-per-to-unit: 1;

	@if $from-unit != 'px' {
		@if	  $from-unit == 'em'  { $px-per-from-unit: $from-context / 1em }
		@else if $from-unit == 'rem' { $px-per-from-unit: $base-font-size / 1rem }
		@else if $from-unit == '%'   { $px-per-from-unit: $from-context / 100% }
		@else if $from-unit == 'ex'  { $px-per-from-unit: $from-context / 2ex }
		@else if $from-unit == 'in'  { $px-per-from-unit: $px-per-in }
		@else if $from-unit == 'mm'  { $px-per-from-unit: $px-per-mm }
		@else if $from-unit == 'cm'  { $px-per-from-unit: $px-per-cm }
		@else if $from-unit == 'pt'  { $px-per-from-unit: $px-per-pt }
		@else if $from-unit == 'pc'  { $px-per-from-unit: $px-per-pc }
		@else if $to-unit == 'ch' or $to-unit == 'vw' or $to-unit == 'vh' or $to-unit == 'vmin' {
			@warn "#{$from-unit} units can't be reliably converted; Returning original value.";
			@return $length;
		}
		@else {
			@warn "#{$from-unit} is an unknown length unit. Returning original value.";
			@return $length;
		}
	}

	@if $to-unit != 'px' {
		@if	  $to-unit == 'em'  { $px-per-to-unit: $to-context / 1em }
		@else if $to-unit == 'rem' { $px-per-to-unit: $base-font-size / 1rem }
		@else if $to-unit == '%'   { $px-per-to-unit: $to-context / 100% }
		@else if $to-unit == 'ex'  { $px-per-to-unit: $to-context / 2ex }
		@else if $to-unit == 'in'  { $px-per-to-unit: $px-per-in }
		@else if $to-unit == 'mm'  { $px-per-to-unit: $px-per-mm }
		@else if $to-unit == 'cm'  { $px-per-to-unit: $px-per-cm }
		@else if $to-unit == 'pt'  { $px-per-to-unit: $px-per-pt }
		@else if $to-unit == 'pc'  { $px-per-to-unit: $px-per-px }
		@else if $to-unit == 'ch' or $to-unit == 'vw' or $to-unit == 'vh' or $to-unit == 'vmin' {
			@warn "#{$to-unit} units can't be reliably converted; Returning original value.";
			@return $length;
		}
		@else {
			@warn "#{$to-unit} is an unknown length unit. Returning original value.";
			@return $length;
		}
	}
	@return $length * $px-per-from-unit / $px-per-to-unit;
}

// --------------------------------------------
//	Media Query Mixins
// --------------------------------------------

@mixin media-query($value, $ltie9: $use-ltie9-mq-fallbacks, $operator: $min, $px: false) {
	@if ($px == false) {
		@media (#{$operator} #{em($value)}) {
			@content;
		}
	}
	@else {
		@media (#{$operator} #{strip-units($value)}px) {
			@content;
		}
	}
	
	@if ($ltie9 == true) {
		@if ($operator == $max and $value < $site-width) {
			// Using max-width media query that's smaller than $site-width: do nothing
		}
		@else if ($operator == $min and $value > $site-width) {
			// Using min-width media query that's larger than $site-width: do nothing
		}
		@else {
			.ltie9 & {
				@content;
			}
		}
	}
}

@mixin media-query-and($mqs, $ltie9: $use-ltie9-mq-fallbacks, $first-operator: $min, $second-operator: $max, $px: false) {
	@if (type-of($mqs) == 'list') {
		$length: length($mqs);
		
		@if ($length == 2 and type-of(nth($mqs, 1)) == 'number') {
			@for $i from 0 to $length - 1 {
				$first-value: nth($mqs, $i + 1);
				$second-value: nth($mqs, $i + 2);
				
				@if ($px == false) {
					@media (#{$first-operator} #{em($first-value)}) and (#{$second-operator} #{em($second-value)}) {
						@content;
					}
				}
				@else {
					@media (#{$first-operator} #{strip-units($first-value)}px) and (#{$second-operator} #{strip-units($second-value)}px) {
						@content;
					}
				}
				
				@if ($ltie9 == true and $second-value >= $site-width and $first-operator == $min and $second-operator == $max) {
					.ltie9 & {
						@content;
					}
				}
			}
		}
		@else if (type-of(nth($mqs, 1)) == 'list') {
			@for $i from 0 to $length {
				@if (length(nth($mqs, $i + 1)) == 2) {
					$first-value: nth(nth($mqs, $i + 1), 1);
					$second-value: nth(nth($mqs, $i + 1), 2);
					
					@if ($px == false) {
						@media (#{$first-operator} #{em($first-value)}) and (#{$second-operator} #{em($second-value)}) {
							@content;
						}
					}
					@else {
						@media (#{$first-operator} #{strip-units($first-value)}px) and (#{$second-operator} #{strip-units($second-value)}px) {
							@content;
						}
					}
					
					@if ($ltie9 == true and $second-value >= $site-width and $first-operator == $min and $second-operator == $max) {
						.ltie9 & {
							@content;
						}
					}
				}
			}
		}
	}
}

@mixin media-query-retina {
	@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) {
		@content;
	}
}

// --------------------------------------------
//	Testing Media Queries
// --------------------------------------------

.foo {
  @include media-query(500px) {
    // Outputs ltie9 as < 960px
    color: red;
  }
  
  @include media-query(1000px) {
    // Doesn't output ltie9 as > 960px
    color: blue;
  }
}

.bar {
  @include media-query-and((400px, 600px)) {
    // Doesn't output ltie9 as upper value is < 960px
    color: red;
  }
  
  @include media-query-and(((300px, 400px), (700px, 800px), (900px, 1000px))) {
    // Outputs multiple MQs
    color: blue;
  }
}

.baz {
  @include media-query-retina {
    background: url(@2x.png);
  }
}

SassMeister-output.css

@media (min-width: 31.25em){.foo{color:red}}.ltie9 .foo{color:red}@media (min-width: 62.5em){.foo{color:blue}}
@media (min-width: 25em) and (max-width: 37.5em){.bar{color:red}}@media (min-width: 18.75em) and (max-width: 25em){.bar{color:blue}}@media (min-width: 43.75em) and (max-width: 50em){.bar{color:blue}}@media (min-width: 56.25em) and (max-width: 62.5em){.bar{color:blue}}.ltie9 .bar{color:blue}@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){.baz{background:url(@2x.png)}}