//Sections for Media Queries @mixin forPhoneUp { @media (min-width: #{$screen_tiny - 1}) { @content; } //599px } @mixin forPhoneOnly { @media (max-width: #{$screen_tiny - 1}) { @content; } //599px } @mixin forTabletPortraitUp { @media (min-width: $screen_small) { @content; } //600px } @mixin forTabletPortraitOnly { @media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px } @mixin forTabletLandscapeUp { @media (min-width: $screen_small) { @content; } //900px } @mixin forTabletLandscapeOnly { @media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px } @mixin forDesktopUp { @media (min-width: $screen_medium) { @content; } //1200px } @mixin forDesktopOnly { @media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px } @mixin forBigDesktopUp { @media (min-width: $screen_huge) { @content; } //1800px } //Mobile-first Media Query @mixin goingLarge($width) { @media (min-width: $width/16+em) { @content; } } //Desktop-first Media Query @mixin goingSmall($width) { @media (max-width: $width/16+em) { @content; } }