improve respond-to mixin

_mixins.scss

// phone, tablet, desktop
// phone, desktop, tablet
// tablet, phone, desktop
// tablet, desktop, phone
// desktop, phone, tablet
// desktop, tablet, phone

// phone: max-width: 767
// tablet: min-width: 768 - max-width: 979
// desktop: min-width: 980

// phone, tablet: max-width: 979
// phone, desktop: everything
// desktop, phone: everything
// tablet, phone: max-width: 767
// tablet, desktop: min-width: 768
// desktop, tablet: min-width: 768

$breakpoint_phone: 768px !default;
$breakpoint_tablet: 980px !default;

@mixin respond-to($types...) {
	$maxWidth: -1;
	$minWidth: -1;

	@each $type in $types {
		@if $type == phone {
			$maxWidth: if($maxWidth == -1, $breakpoint_phone - 1, $maxWidth);
			$minWidth: 0;
		}
		@else if $type == tablet {
			@if $maxWidth != 0 {
				$maxWidth: if($maxWidth == -1, $breakpoint_tablet - 1, max($breakpoint_tablet - 1, $maxWidth));
			}

			$minWidth: if($minWidth == -1, $breakpoint_phone, min($breakpoint_phone, $minWidth));
		}
		@else if $type == desktop {
			$maxWidth: 0;
			$minWidth: if($minWidth == -1, $breakpoint_tablet, $minWidth);
		}
	}

	@if $maxWidth <= 0 and $minWidth <= 0 {
		@content;
	}
	@else if $maxWidth <= 0 {
		@media (min-width: $minWidth) {
			@content;
		}
	}
	@else if $minWidth <= 0 {
		@media (max-width: $maxWidth) {
			@content;
		}
	}
	@else {
		@media (min-width: $minWidth) and (max-width: $maxWidth) {
			@content;
		}
	}
}

@include respond-to(phone) {
	.phone {
		expected: "should be: (max-width: #{$breakpoint_phone - 1})";
	}
}

@include respond-to(phone, tablet) {
	.phone-tablet {
		expected: "should be: (max-width: #{$breakpoint_tablet - 1})";
	}
}
@include respond-to(tablet, phone) {
	.tablet-phone {
		expected: "should be: (max-width: #{$breakpoint_tablet - 1})";
	}
}

@include respond-to(tablet, phone) {
	.nested-phone-tablet {
		expected: "should be: (max-width: #{$breakpoint_tablet - 1})";

		@include respond-to(phone) {
			.nested-phone {
				expected: "should be: (max-width: #{$breakpoint_phone - 1})";
			}
		}
	}
}

@include respond-to(phone, desktop) {
	.phone-desktop {
		expected: "should be: no media query at all";
	}
}
@include respond-to(desktop, phone) {
	.desktop-phone {
		expected: "should be: no media query at all";
	}
}

@include respond-to(tablet) {
	.tablet {
		expected: "should be: (min-width: #{$breakpoint_phone}) and (max-width: #{$breakpoint_tablet - 1})";
	}
}

@include respond-to(tablet, desktop) {
	.tablet-desktop {
		expected: "should be: (min-width: #{$breakpoint_phone})";
	}
}

@include respond-to(desktop, tablet) {
	.desktop-tablet {
		expected: "should be: (min-width: #{$breakpoint_phone})";
	}
}

@include respond-to(desktop) {
	.desktop {
		expected: "should be: (min-width: #{$breakpoint_tablet})";
	}
}