Generated by SassMeister.com.

SassMeister-input-HTML.jade

p.red red
p.orange orange
p.yellow yellow
p.green green
p.blue1 blue1
p.blue2 blue2
p.purple1 purple1
p.purple2 purple2

SassMeister-input.scss

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

@import "sass-maps-plus";

//                     _ _         _____ ___________ _____
//                    | (_)       |_   _|  _  |  _  \  _  |
//  _ __ ___   ___  __| |_  __ _    | | | | | | | | | | | |
// | '_ ` _ \ / _ \/ _` | |/ _` |   | | | | | | | | | | | |
// | | | | | |  __/ (_| | | (_| |   | | \ \_/ / |/ /\ \_/ /
// |_| |_| |_|\___|\__,_|_|\__,_|   \_/  \___/|___/  \___/

@mixin media($expressions...) {
  // handle arbitrary values in media-single
  // give 'from/to' priority in media-multiple, over 'for'
    // i.e. output at the from/to points, even if 'for' is false there
}
@include media('<desktop', '>mobile') {
  // this is cute but not good enough
  // min is mobile, max is desktop
  // if I use a mval() function, what happens?
}

@include media(alpha, null) {
  
}
@include media((for: margin)) {
  
}
@include media(null, delta) {
  
}
@mixin hd-media($args...) {
  @media (min-pixel-ratio: 3) {
    @include media($args) {
      @content;
    }
  }
}
@include hd-media(null, 850px) {
  // restricted to hidpi media
}

SassMeister-rendered.html

<p class="red">red</p>
<p class="orange">orange</p>
<p class="yellow">yellow</p>
<p class="green">green</p>
<p class="blue1">blue1</p>
<p class="blue2">blue2</p>
<p class="purple1">purple1</p>
<p class="purple2">purple2</p>