Media Queries Sass Mixin

media-queries-sass-mixin.markdown

Media Queries Sass Mixin

A Pen by Dang Van Thanh on CodePen.

License.

style.scss

@import "compass/css3";

$phone : '(max-width: 480px)';
$tablet-portrait: '(max-width: 767px)';
$tablet-landscape: '(min-width: 768px) and (max-width: 979px)';
$large-desktop: '(min-width: 1200px)';
$non-retina: 'screen and (-webkit-max-device-pixel-ratio: 1)';
$retina: '(min--moz-device-pixel-ratio: 1.5), 
					(-o-min-device-pixel-ratio: 3/2), 
					(-webkit-min-device-pixel-ratio: 1.5), 
					(min-device-pixel-ratio: 1.5), 
					(min-resolution: 144dpi), 
					(min-resolution: 1.5dppx)';

@mixin respond-to($media) {
	@media only screen and #{$media} {
		@content;
	}
}

body {
  background-color: rgba(#1abc9c, .5);
  @include respond-to($phone) {
    background-color: rgba(#2ecc71, .5);
  }
  @include respond-to($tablet-portrait) {
    background-color: rgba(#3498db, .5);
  }
  @include respond-to($tablet-landscape) {
    background-color: rgba(#9b59b6, .5);
  }  
}