Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="search">

  <ul class="search__foo">
    <li>A</li>
    <li>B</li>
    <li class="hidden-lap-and-up">C</li>
    <li class="hidden-lap-and-up">D</li>
    <li class="hidden-lap-and-up">E</li>
  </ul>

  <form class="search__bar">
    <input type="text" class="lorem" />
  </form>
  
  <ul class="search__baz  show-lap-and-up">
    <li>A</li>
    <li>B</li>
  </ul>

</div>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

$mq-palm: "max-width: 720px";
$mq-lap-and-up: "min-width: 720px";



@mixin media-query($mq) {
  @if $mq == palm {
    @media screen and ($mq-palm) {
      @content
    }
  }
  @if $mq == lap-and-up {
    @media screen and ($mq-lap-and-up) {
      @content
    }
  }
}










.foo {
  color: red;

  @include media-query(palm) {
    color: blue;
  }

  @include media-query(lap-and-up) {
    color: green;
  }

}

.foo__bar {
  @include media-query(lap-and-up) {
    color: yellow;
  }
}

SassMeister-output.css

.foo {
  color: red;
}
@media screen and (max-width: 720px) {
  .foo {
    color: blue;
  }
}
@media screen and (min-width: 720px) {
  .foo {
    color: green;
  }
}

@media screen and (min-width: 720px) {
  .foo__bar {
    color: yellow;
  }
}

SassMeister-rendered.html

<div class="search">

  <ul class="search__foo">
    <li>A</li>
    <li>B</li>
    <li class="hidden-lap-and-up">C</li>
    <li class="hidden-lap-and-up">D</li>
    <li class="hidden-lap-and-up">E</li>
  </ul>

  <form class="search__bar">
    <input type="text" class="lorem" />
  </form>
  
  <ul class="search__baz  show-lap-and-up">
    <li>A</li>
    <li>B</li>
  </ul>

</div>