#SCSS media queries snippets#

This small package installs a couple of snippets that I use often in my scss files. The breakpoints are inspired by Zurb's Foundation and can, of course, be tweaked to your liking. I usually put the media queries in a seperate file like _media-queries.scss which looks like this:

@function lower-bound($range) {
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range, 1);
}

@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}

@function em-calc($px-value, $rem-base: 16) {
  $value: $px-value / $rem-base;
  @return $value * 1em;
}

$small-range: (0, em-calc(640)); /* between 0 & 640px */
$medium-range: (em-calc(641), em-calc(1000)); /* between 640px & 1000px */
$large-range: (em-calc(1001), em-calc(1025)); /* between 1001px & 1025px */
$xlarge-range: (em-calc(1026), em-calc(1920)); /* between 1026px & 1920px */
$xxlarge-range: (em-calc(1921), 99999999px); /* between 1920px & infinity */

$screen: 'only screen';
$landscape: '#{$screen} and (orientation: landscape)';
$portrait: '#{$screen} and (orientation: portrait)';
$small-up: $screen;

$small-only: '#{$screen} and (max-width: #{upper-bound($small-range)})';
$medium-up: '#{$screen} and (min-width:#{lower-bound($medium-range)})';
$medium-only: '#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})';

$large-up: '#{$screen} and (min-width:#{lower-bound($large-range)})';
$large-only: '#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})';

$xlarge-up: '#{$screen} and (min-width:#{lower-bound($xlarge-range)})';
$xlarge-only: '#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})';

$xxlarge-up: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)})';
$xxlarge-only: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})';

This package will install these snippets:

sm-up > @media #{$small-up} {}
sm-only > @media #{$small-only} {}
med-up > @media #{$medium-up} {}
med-only > @media #{$medium-only} {}
large-up > @media #{$large-up} {}
large-only > @media #{$large-only} {}
xlarge-up > @media #{$xlarge-up} {}
xlarge-only > @media #{$xlarge-only} {}
xxlarge-up > @media #{$xxlarge-up} {}
xxlarge-only > @media #{$xxlarge-only} {}
portrait > @media #{$portrait} {}
landscape > @media #{$landscape} {}