Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----

// GO TO LINE 125!

// --------------------------------------------
//	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-ltie9-mq-fallbacks: true;

// --------------------------------------------
//	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)};
	}
}

// --------------------------------------------
//	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);
  }
}