<===> input.scss
@media all and (min-width: 960px) {
  b {
    font-weight: normal;
  }
}

@media (min-width: 980px) {
  a {
    color: red;
  }
}

@media all {
  /* hey */
  p {
    color: blue;
    a {
      color: green;
      &:after {
        content: ">>";
      }
    }
  }
  span {
    display: inline-block;
  }
}

a b c {
  /* a */
  blee: blee;
  /* b */
  d e f {
    blah: blah;
    bloo: bloo;
  }
  /* c */
  g h, i j {
    @media print and (foo: 1 2 3), (bar: 3px hux(muz)), not screen {
      /* aa */
      hey: ho;
      /* bb */
      k l m {
        hee: fee;
      }
      /* cc */
      haa: hoo;
      /* dd */
    }
  }
  /* d */
  blah: blah;
}

@mixin simple-media-query($max-width, $min-width) {
  @media only screen and (max-width : $max-width) and (min-width : $min-width) {
    @content;
  }
}

@mixin test($value) {
  border-color: $value;
}

body {
  @include test("#ccc");
  @include simple-media-query(900px, 400px) {
    border-color: black;
  }
}

$foo: 23;
$bar: 45;

@media only screen and (max-width: $foo) and (min-width: $bar) {
  hey {
    ho: hoo;
  }
}

@media (max-width: 200) and (min-width: 100) {
  div {
    color: red;
  }
}

@media not bl#{ah} and (width: 200px) {
  div {
    color: brown, blue, black;
  }
}

@mixin media($var1, $var2) {
  @media screen and ($var1: $var2) {
    @content;
  }
}

@include media(max-device-width, 500px) {
  foo {
    bar: "works";
  }
}

div {
  color: red;
  span {
    color: blue;
    @media screen {
      p {
        color: green;
      }
    }
  }
}
<===> output.css
@media all and (min-width: 960px) {
  b {
    font-weight: normal;
  }
}
@media (min-width: 980px) {
  a {
    color: red;
  }
}
@media all {
  /* hey */
  p {
    color: blue;
  }
  p a {
    color: green;
  }
  p a:after {
    content: ">>";
  }

  span {
    display: inline-block;
  }
}
a b c {
  /* a */
  blee: blee;
  /* b */
  /* c */
  /* d */
  blah: blah;
}
a b c d e f {
  blah: blah;
  bloo: bloo;
}
@media print and (foo: 1 2 3), (bar: 3px hux(muz)), not screen {
  a b c g h, a b c i j {
    /* aa */
    hey: ho;
    /* bb */
    /* cc */
    haa: hoo;
    /* dd */
  }
  a b c g h k l m, a b c i j k l m {
    hee: fee;
  }
}

body {
  border-color: "#ccc";
}
@media only screen and (max-width: 900px) and (min-width: 400px) {
  body {
    border-color: black;
  }
}

@media only screen and (max-width: 23) and (min-width: 45) {
  hey {
    ho: hoo;
  }
}
@media (max-width: 200) and (min-width: 100) {
  div {
    color: red;
  }
}
@media not blah and (width: 200px) {
  div {
    color: brown, blue, black;
  }
}
@media screen and (max-device-width: 500px) {
  foo {
    bar: "works";
  }
}
div {
  color: red;
}
div span {
  color: blue;
}
@media screen {
  div span p {
    color: green;
  }
}