1// Responsive Mixins 2 3@mixin respond($media) { 4 @if $media == portrait-phones { 5 @media only screen and (max-width: $min-device-width) { @content; } 6 } 7 @else if $media == landscape-phones { 8 @media only screen and (min-width: breakpoint($min-device-width)) and (max-width: breakpoint($tablet-device-width)) { @content; } 9 } 10 @else if $media == all-phones { 11 @media only screen and (max-width: breakpoint($tablet-device-width)) { @content; } 12 } 13 @else if $media == portrait-tablets { 14 @media only screen and (max-width: $tablet-device-width) { @content; } 15 } 16 @else if $media == tablets { 17 @media only screen and (min-width: $tablet-device-width) and (max-width: $document-width - 1) { @content; } 18 } 19 @else if $media == desktop { 20 @media only screen and (min-width: $tablet-device-width) { @content; } 21 } 22 @else if $media == document-width { 23 @media only screen and (max-width: $document-width + 20) { @content; } 24 } 25 @else if $media == large-screens { 26 @media only screen and (min-width: $max-device-width) { @content; } 27 } 28 @else if $media == print { 29 @media print { @content; } 30 } 31 @else { 32 @media only screen and ('#{$media}') { @content; } 33 } 34} 35