@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;
      }
    }
  }
}