Stu Robertson's Media Query Mixin Example

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

$doc-font-size: 16;
@mixin mq($point, $IE9: false, $query1: min, $query2: width) {
    @if $IE9 == true{
        .lt-ie9 & {
            @content;
        }
    }

    @media (#{$query1}-#{$query2}: $point / $doc-font-size +em) {
        @content;
    }
}

// Simple Example
.example {
  width: 200px;
  @include mq(500) { width: 500px; }
}

// Or, even better with variables for breakpoints:
$bp-small: 300;

.with-variables {
  width: 300px;
  @include mq($bp-small) { width: 400px; }
}

SassMeister-output.css

.example {
  width: 200px;
}
@media (min-width: 31.25em) {
  .example {
    width: 500px;
  }
}

.with-variables {
  width: 300px;
}
@media (min-width: 18.75em) {
  .with-variables {
    width: 400px;
  }
}