conditional-media-queries.scss

// USAGE

/*
.box {
  width: 100%;

  @include bp(mobile-up) {
    width: 100px;
  }
}
*/

// VARIABLES

$mobile-cutoff: 480px;
$tablet-cutoff: 768px;
$sdesktop-cutoff: 992px;
$desktop-cutoff: 1200px;
$xlarge-cutoff: 1440px;

// THE MIXIN
@mixin bp($point) {

  // MIN WIDTH
  //                       480         768         992         1200        1440
  //                  '     '     '     '     '     '     '     '     '     '     '     '
  //                        '           '           '           '           '
  //                        '           '           '           '           '
  // tablet-up              ^----------------------------------------------------------->
  // sdesktop-up                        ^----------------------------------------------->
  // desktop-up                                     ^----------------------------------->
  // xlarge-up                                                  ^----------------------->
  // xxlarge-up                                                             ^----------->

  @if $point == tablet-up {
    @media only screen and (min-width: #{$mobile-cutoff}) { @content; }
  }
  @else if $point == sdesktop-up {
    @media only screen and (min-width: #{$tablet-cutoff}) { @content; }
  }
  @else if $point == desktop-up {
    @media only screen and (min-width: #{$sdesktop-cutoff}) { @content; }
  }
  @else if $point == xlarge-up {
    @media only screen and (min-width: #{$desktop-cutoff}) { @content; }
  }
  @else if $point == xxlarge-up {
    @media only screen and (min-width: #{$xlarge--cutoff}) { @content; }
  }

  // MAX WIDTH
  //                       480         768         992         1200        1440
  //                  '     '     '     '     '     '     '     '     '     '
  //                        '           '           '           '           '
  //                        '           '           '           '           '
  // tablet-down       <----------------^           '           '           '
  // sdesktop-down     <----------------------------^           '           '
  // desktop-down      <----------------------------------------^           '
  // xlarge-down       <----------------------------------------------------^

  @else if $point == tablet-down {
    @media only screen and (max-width: #{$tablet-cutoff - 1px}) { @content; }
  }
  @else if $point == sdesktop-down {
    @media only screen and (max-width: #{$sdesktop-cutoff - 1px}) { @content; }
  }
  @else if $point == desktop-down {
    @media only screen and (max-width: #{$desktop-cutoff - 1px}) { @content; }
  }
  @else if $point == xlarge-down {
    @media only screen and (max-width: #{$xlarge-cutoff - 1px}) { @content; }
  }

  // DEVICE
  //                       480         768         992         1200        1440
  //                  '     '     '     '     '     '     '     '     '     '
  //                  '     '           '           '           '           '
  //                  '     '           '           '           '           '
  // mobile-only       <--->            '           '           '           '
  // tablet-only            <---------->            '           '           '
  // sdesktop-only                      <---------->            '           '
  // desktop-only                                   <----------->           '
  // xlarge-only                                                 <---------->
	
  @else if $point == mobile-only {
    @media only screen and (max-width: #{$mobile-cutoff - 1px}) { @content; }
  }
  @else if $point == tablet-only {
    @media only screen and (min-width: #{$mobile-cutoff}) and (max-width: #{$tablet-cutoff - 1px}) { @content; }
  }
  @else if $point == sdesktop-only {
    @media only screen and (min-width: #{$tablet-cutoff}) and (max-width: #{$sdesktop-cutoff - 1px}) { @content; }
  }
  @else if $point == desktop-only {
    @media only screen and (min-width: #{$sdesktop-cutoff}) and (max-width: #{$desktop-cutoff - 1px}) { @content; }
  }
  @else if $point == xlarge-only {
    @media only screen and (min-width: #{$desktop-cutoff}) and (max-width: #{$xlarge-cutoff - 1px}) { @content; }
  }
}