hsquareweb of Matrix Group
5/23/2014 - 9:07 PM

.sass responsive mixins

.sass responsive mixins

=vp-min($viewport)
	@media screen and (min-width: $viewport)
		@content
 
=vp-max($viewport)
	@media screen and (max-width: $viewport)
		@content
 
=vp-min-max($v-min, $v-max)
	@media screen and (min-width: $v-min) and (max-width: $v-max)
		@content
 
=bp($media)
	@if $media == "tablet"
		@media screen and (max-width: 1024px)
			@content
	
	@if $media == "tablet-portrait"
		@media screen and (max-width: 800px)
			@content
		
	@if $media == "mobile"
		@media screen and (max-width: 720px)
			@content
 
	@if $media == "mobile-portrait"
		@media screen and (max-width: 400px) and (orientation: portrait)
			@content