media-queries.scss

$mobile-cutoff: 480px;
$tablet-cutoff: 768px;
$sdesktop-cutoff: 1136px;
$desktop-cutoff: 1440px;
$xlarge-cutoff: 1920px;

$mobile-down: "only screen and (max-width: #{$mobile-cutoff})";
$tablet-down: "only screen and (max-width: #{$tablet-cutoff})";
$sdesktop-down: "only screen and (max-width: #{$sdesktop-cutoff})";
$desktop-down: "only screen and (max-width: #{$desktop-cutoff})";
$xlarge-down: "only screen and (max-width: #{$xlarge-cutoff})";

$mobile-up: "only screen and (min-width: #{$mobile-cutoff})";
$tablet-up: "only screen and (min-width: #{$tablet-cutoff})";
$sdesktop-up: "only screen and (min-width: #{$sdesktop-cutoff})";
$desktop-up: "only screen and (min-width: #{$desktop-cutoff})";
$xlarge-up: "only screen and (min-width: #{$xlarge-cutoff})";


/* -- usage -- */
/*

div {
  width: 100%
}

@media #{$tablet-up} {
  div {
    width: 50%;
  }
}

@media #{$desktop-up} {
  div {
    width: 25%;
  }
}

*/