Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// Define media as a variable
$media-small: '(max-width: 20em)';
$media-output: true;
$line-height: 1.4;

@mixin setup($media) {
  @if $media == $media-small {
    $line-height: 1.3;
  }
}

@mixin media($media) {
  @include setup($media);

  @if $media-output {
    @media #{$media} {
      @content;
    }
  }
  @else {
    @content;
  }
}

html {
  line-height: $line-height;
}

// Syntax is almost identical to naked CSS
@media (min-width: 20em) {}
@include media( '(min-width: 20em)' ) {}

// Any CSS media query is possible
@include media( '#{$media-small} and (orientation: portrait)' ) {
  @include setup($media-small);
  .foo {
    content: 'foo';
    line-heigth: $line-height;
  }
}
@include media( '(-webkit-min-device-pixel-ratio: 2.0), (min-resolution: 192dpi)' ) {
  .bar {
    content: 'bar';
    line-heigth: $line-height;
  }
}

@include media($media-small) {
  .baz {
    content: 'baz';
    line-heigth: $line-height;      
  }
}

SassMeister-output.css

html {
  line-height: 1.4;
}

@media (max-width: 20em) and (orientation: portrait) {
  .foo {
    content: 'foo';
    line-heigth: 1.3;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .bar {
    content: 'bar';
    line-heigth: 1.3;
  }
}
@media (max-width: 20em) {
  .baz {
    content: 'baz';
    line-heigth: 1.3;
  }
}