Breakpoints, media queries and IE8 legacy via SCSS

Set your breakpoints using a map, indicate media queries support via a boolean within scss file to be parsed and define re-usable media queries based minimum width past as an argument to a mixin.

Define all your breakpoints and generic media queries using maps (variables) and mixin in one of your scss files.
Note that “min-aspect-ratio” feature is used to test landscape orientation capability as it has a better cross device support as explain <a href=”/mobile-first-media-queries-portrait-landscape/”>here</a>.

Define your breakpoints map and mixin

    xxs:20em,   //320
    xs: 40em,   //640
    xs1: 641px,
    s:  48em,   //768
    m:  60em,   //960
    xm: 64em,   //1024
    l:  80em,   //1280
    xl: 90em    //1440

@mixin respond-to($breakpoint){
    // Retrieves the value from the key
    $value: map-get($breakpoints, $breakpoint);

        // If the key exists in the map
        @if ($value != null) {
          // Prints a media query based on the value
          @media only screen and (min-device-width:$value) and (min-width:$value),
            only screen and (min-device-width:$value) and (min-width:$value) and (min-aspect-ratio: 1/1)/*landscape*/{

        // If the key doesn't exist in the map
        @else {
          @warn "Unfortunately, no value could be retrieved from '#{$breakpoint}'. "
              + "Please make sure it is defined in '$breakpoints' map.";

Use that mixin in your scss files

@include respond-to(xs) {
#main{ border:none 0; }
@include respond-to(m) {
#main{ border:none 0; width:70%; float:left; }
@include respond-to(xm) {
#main{ width:50%; }

Parsing all of that in the main scss style file

$mqs: true;//compatible with mediaquery
@import "_mediaqueris";
@import "_layout";

$mqs: false;//non compatible with mediaquery
@import "_variables";
@import "_layout";