Responsive Breakpoints for SASS

media-quiries.scss

/* === Responsive Breakpoint Values === */
// XL  Breakpoint: 1025px - 1200px; (desktop and up)
// L   Breakpoint: 769px  - 1024px; (tablet landscape)
// M   Breakpoint: 706px  - 768px;  (tablet portrait)
// S   Breakpoint: 481px  - 705px;  (mobile landscape)
// XS  Breakpoint: 320px  - 480px;  (mobile portrait)

/* === SASS variables === */
$mq-desktop	      : 1025px;
$mq-tablet-landscape    : 769px;
$mq-tablet-portrait     : 706px;
$mq-mobile-landscape    : 481px;
$mq-mobile-portrait     : 320px;


@mixin mobile-only {
	@media (max-width : $mq-mobile-landscape) {
		@content;
	}
}

@mixin mobile-portrait-only {
	@media (max-width : $mq-mobile-portrait) {
		@content;
	}
}

@mixin mobile-portrait-and-below {
	@media (max-width : $mq-mobile-portrait) {
		@content;
	}
}

@mixin mobile-portrait-and-up {
	@media (min-width : $mq-mobile-portrait) {
		@content;
	}
}

@mixin mobile-landscape-only {
	@media only screen and (min-width : $mq-mobile-portrait + .001) and (max-width : $mq-mobile-landscape) {
		@content;
	}
}

@mixin mobile-landscape-and-below {
	@media only screen and (max-width : $mq-mobile-landscape) {
		@content;
	}
}

@mixin mobile-landscape-and-up {
	@media only screen and (min-width : $mq-mobile-portrait + .001) {
		@content;
	}
}

@mixin tablet-only {
	@media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-landscape) {
		@content;
	}
}

@mixin tablet-portrait-only {
	@media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-portrait) {
		@content;
	}
}

@mixin tablet-portrait-and-below {
	@media only screen and (max-width : $mq-tablet-portrait) {
		@content;
	}
}

@mixin tablet-portrait-and-up {
	// @media only screen and (min-width : $mq-mobile-landscape + 1) {
	@media only screen and (min-width : $mq-tablet-portrait + .001) {
		@content;
	}
}

@mixin tablet-landscape-only {
	@media only screen and (min-width : $mq-tablet-portrait + .001) and (max-width : $mq-tablet-landscape) {
		@content;
	}
}

@mixin tablet-landscape-and-below {
	@media only screen and (max-width : $mq-tablet-landscape) {
		@content;
	}
}

@mixin tablet-landscape-and-up {
	@media only screen and (min-width : $mq-tablet-portrait + .001) {
		@content;
	}
}

@mixin desktop-and-up {
	@media only screen and (min-width : $mq-tablet-landscape + .001) {
		@content;
	}
}

@mixin desktop-and-below {
	@media only screen and (max-width : $mq-desktop) {
		@content;
	}
}

@mixin desktop-only {
	@media only screen and (min-width : $mq-tablet-landscape + .001) and (max-width : $mq-desktop) {
		@content;
	}
}

@mixin retina {
	@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
		@content;
	}
}