Suzi Media Query Sass Mixins

mq-mixins.scss

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

// The largest size for the traditional fixed-width desktop site
$site-width: 980px;

// Variables for media query operators. Saves typing
$min: unquote('min-width:');
$max: unquote('max-width:');
$min-h: unquote('min-height:');
$max-h: unquote('max-height:');

// Whether to output .ltie9 media query fallbacks
$use-ltie9-mq-fallbacks: true;

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

// Strips the units from the $number passed in
@function strip-units($number) {
	@return $number / ($number * 0 + 1);
}

// Converts pixels to em, based off 16px default. Can also be unitless for use in line-height
@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
// --------------------------------------------

// Standard, one-condition media query
// Defaults to min-width, outputs .ltie9 fallback (if the value is appropriate) and converts px to ems
// Simple usage: @include media-query(xxx)
@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;
			}
		}
	}
}

// Two-condition media query
// Defaults to min-width and max-width, outputs .ltie9 fallback (if the value is appropriate) and converts px to ems
// Simple usage: @include media-query-and(xxx, yyy)
@mixin media-query-and($first-value, $second-value, $ltie9: $use-ltie9-mq-fallbacks, $first-operator: $min, $second-operator: $max, $px: false) {	
	@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;
		}
	}
}

// Outputs a "retina" media query
@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;
	}
}