Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="foo">Allo Allo</div>o

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import 'mq';

$mq-responsive: true;
$mq-breakpoints: (
    mobile:  320px,
    tablet:  740px,
    desktop: 980px,
    wide:    1300px,

    // Tweakpoints
    desktopAd: 810px,
    mobileLandscape: 480px
);
$mq-static-breakpoint: desktop;
$mq-show-breakpoints: (mobile, mobileLandscape, tablet, desktop, wide);

.foo {
    @include mq($from: mobile, $until: tablet) {
        background: red;
        height:10rem;
    }
    @include mq($from: tablet, $until: desktop) {
        background: green;
        height:20rem;
    } 
    @include mq($from: desktop, $until: wide) {
        background: blue;
        height:30rem;
    } 
    @include mq($from: wide) {
        background: orange;
        height:35rem;
    } 
}  

SassMeister-output.css

@media (min-width: 20em) and (max-width: 46.24em) {
  .foo {
    background: red;
    height: 10rem;
  }
}

@media (min-width: 46.25em) and (max-width: 61.24em) {
  .foo {
    background: green;
    height: 20rem;
  }
}

@media (min-width: 61.25em) and (max-width: 81.24em) {
  .foo {
    background: blue;
    height: 30rem;
  }
}

@media (min-width: 81.25em) {
  .foo {
    background: orange;
    height: 35rem;
  }
}

SassMeister-rendered.html

<div class="foo">Allo Allo</div>o