Media Query mixin

__uses.scss

.some-element {
  // Default to mobile first.
  color: blue;
  
  @include mq(medium) {
    // Styles for medium and up.
    color: red;
  }
  
  @include mq(large) {
    // styles for large and up.
    color: green;
  }
  
  @include mq(small, only) {
    // Styles for ONLY small. I don't use this often.
  }
  
  @include mq(medium, only) {
    // Styles for ONLY medium. I'm going to omit large, only.
  }
}

_mq.scss

// Set these to your media queries.
$break-small: 650px;
$break-medium: 900px;
$ie8-size: false !default;

/**
 * Use:
 *
 * @include mq(medium) {
 *   font-size: 100px;
 * }
 *
 * If you want something to ONLY be used at that size, then the second
 * parameter should be 'only'.
 *
 * @include mq(small, only) {
 *   font-size: 200px;
 * }
 */
@mixin mq($size, $only: false) {
	@if $size == small {
		@if $only == only {
			@include mq-helper(none, $break-small) {
				@content;
			}
		}
		@else if $only == medium {
			@include mq-helper(none, $break-medium) {
				@content;
			}
		}
		@else {
			@include mq-helper(none, none) {
				@content;
			}
		}
	}
	@else if $size == medium {
		@if $only == only {
			@include mq-helper($break-small + 1, $break-medium) {
				@content;
			}
		}
		@else {
			@include mq-helper($break-small + 1, none) {
				@content;
			}
		}
	}
	@else if $size == large {
		@if $only == only {
			@include mq-helper($break-medium + 1, none) {
				@content;
			}
		}
		@else {
			@include mq-helper($break-medium + 1, none) {
				@content;
			}
		}
	}
}
@mixin mq-helper($min: none, $max: none) {
	@if $ie8-size {
		@if (($min == none or $ie8-size > $min) and ($max == none or $ie8-size < $max)) {
			@content;
		}
	}
	@else {
		@if $min == none and $max == none {
			@content;
		}
		@else if $min and $max == none {
			@media screen and (min-width: $min) {
				@content
			}
		}
		@else if $max and $min == none {
			@media screen and (max-width: $max) {
				@content;
			}
		}
		@else {
			@media screen and (min-width: $min) and (max-width: $max) {
				@content;
			}
		}
	}
}