_breakpoints.scss from a small project with support for old IE. This requires that when declaring the media-queries, you declare them from smallest to widest. Note: mixin can only be used inside a CSS declaration block.

_breakpoints.scss

// Breakpoints for responsive design ($cols are from Frameless Grid)
$breakpoint-1: $cols5;
$breakpoint-2: $cols7;
$breakpoint-3: $cols9;

@mixin breakpoint($point) {
    @if $point == wide {
        @media (min-width: $breakpoint-3) { @content; }
        .oldie & { @content; }
    }
    @else if $point == medium {
        @media (min-width: $breakpoint-2) { @content; }
        .oldie & { @content; }
    }
    @else if $point == narrow {
        @media (min-width: $breakpoint-1) { @content; }
        .oldie & { @content; }
    }
    @else {
        @media (#{$point}) { @content; }
    }
}

// Usage: @include breakpoint(wide) { width: 45em; }