Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

$breakpoints: (
  palm       : 'screen and (max-width : 739px)',
  lap        : 'screen and (min-width : 740px) and (max-width : 979px)',
  lap-and-up : 'screen and (min-width : 740px)',
  portable   : 'screen and (max-width : 979px)',
  desk       : 'screen and (min-width : 980px)',
  wide       : 'screen and (min-width : 1280px)'
) !default;

//Set defaults per module

$header-breakpoints: $breakpoints !default;
$header-breakpoints: map-merge($breakpoints, (
  mobile: 'only screen and (max-width: 420px)'
));

// New usage will be:

body {
  @each $key in map-keys($header-breakpoints) {
    @media #{map-get($header-breakpoints, $key)} {
      debug: $key;
      debug: map-get($header-breakpoints, $key);
    }  
  }
}

SassMeister-output.css

@media screen and (max-width: 739px) {
  body {
    debug: palm;
    debug: "screen and (max-width : 739px)";
  }
}

@media screen and (min-width: 740px) and (max-width: 979px) {
  body {
    debug: lap;
    debug: "screen and (min-width : 740px) and (max-width : 979px)";
  }
}

@media screen and (min-width: 740px) {
  body {
    debug: lap-and-up;
    debug: "screen and (min-width : 740px)";
  }
}

@media screen and (max-width: 979px) {
  body {
    debug: portable;
    debug: "screen and (max-width : 979px)";
  }
}

@media screen and (min-width: 980px) {
  body {
    debug: desk;
    debug: "screen and (min-width : 980px)";
  }
}

@media screen and (min-width: 1280px) {
  body {
    debug: wide;
    debug: "screen and (min-width : 1280px)";
  }
}

@media only screen and (max-width: 420px) {
  body {
    debug: mobile;
    debug: "only screen and (max-width: 420px)";
  }
}