Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

// media query mixin requirements:
//   - allow for multiple statements 
//   - allow for orientation
//   - allow for retina

$base-font-size: 16 !default;

@function calc-em($target, $context: $base-font-size) {
    @return $target / $context * 1em;
}
  
@mixin media-query($from: false, $to: false, $and: false) {
  $_from  : 0;
  $_to    : 0;
  $_and   : $and or null;
  $_query : null;
  
  @if($from) {
    $_from: calc-em($from);
  }
  
  @if($to) {
    $_to: calc-em($to);
  }
  
  @if($_from or $_to or $_and) {
    
    @if ($_from != 0) { $_query: '#{$_query} and (min-width: #{$_from})'; } 
    @if ($_to != 0)   { $_query: '#{$_query} and (max-width: #{$_to})';   } 
    @if ($_and)       { $_query: '#{$_query} and #{$_and}';               } 
    
  }
  
  $_query: unquote(#{$_query});
  
  @media all #{$_query} {
    @content;
  }
  
}

// Media Query mixin
// Usage:
// .element {
//     @include media-query($from: 320) {
//         color: red;
//     }
//     @include media-query($to: 640) {
//         color: blue;
//     }
//     @include media-query(320, 640) {
//         color: green;
//     }
//     @include media-query($from: 640, $and: '(orientation: landscape)') {
//         color: teal;
//     }
//     @include media-query(950) {
//         color: hotpink;
//     }
// }

.myclass {
  color: red;
      @include media-query($from: 320) {
        color: red;
    }
    @include media-query($to: 640) {
        color: blue;
    }
    @include media-query(320, 640) {
        color: green;
    }
    @include media-query($from: 640, $and: '(orientation: landscape)') {
        color: teal;
    }
    @include media-query($to: 950, $and: '(-webkit-min-device-pixel-ratio: 2) and 
(min-resolution: 192dpi)') {
        color: hotpink;
    }
  
}

SassMeister-output.css

.myclass {
  color: red;
}
@media all and (min-width: 20em) {
  .myclass {
    color: red;
  }
}
@media all and (max-width: 40em) {
  .myclass {
    color: blue;
  }
}
@media all and (min-width: 20em) and (max-width: 40em) {
  .myclass {
    color: green;
  }
}
@media all and (min-width: 40em) and (orientation: landscape) {
  .myclass {
    color: teal;
  }
}
@media all and (max-width: 59.375em) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
  .myclass {
    color: hotpink;
  }
}