Some SASS variables you can re-use in all your web projects

mediaqueries.scss

/**
 * Media Queries
 */
$phone: "(max-width: 768px)";
$phone-portrait: "(max-width: 480px) and (orientation: portrait)";
$phone-landscape: "(max-width: 768px) and (orientation: landscape)";
$larger-than-phone: "(min-width: 768px)";

$tablet: "(min-width: 769px) and (max-width: 1023px)";
$smaller-than-tablet: "(max-width: 1023px)";
$larger-than-tablet: "(min-width: 1024px)";

$desktop: "(min-width: 1024px) and (max-width: 1920px)";
$big-desktop: "(min-width: 1921px)"; // For iMacs or any 4k Monitor

/**
 * In your SCSS
 * Usage Example: 
  .cssclass { 
      @media #{$phone-portrait} { 
          width: 80%;
      } 
   }
 */