media width mixins courtesy of http://stackoverflow.com/users/1652962/cimmanon

gistfile1.scss

$output-media-width: true !default; // true = all, otherwise use a list of numeric values (eg. 320px 23em)

@mixin media-min-width($bp) {
    @if type-of($output-media-width) != list {
        @media (min-width: $bp) {
            @content;
        }
    } @else {
        $output-bp: find-comparable($bp, $output-media-width);
        @if not comparable($output-bp, $bp) {
            @debug "Output breakpoint: #{$output-bp}, Chosen minimum width: #{$bp}";
        } @else if $output-bp >= $bp {
            @content;
        }
    }
}

@mixin media-between($bp1, $bp2) {
    @if type-of($output-media-width) != list {
        @media (min-width: $bp1) and (max-width: make-less-than($bp2)) {
            @content;
        }
    } @else {
        $output-bp1: find-comparable($bp1, $output-media-width);
        $output-bp2: find-comparable($bp2, $output-media-width);
        @if not comparable($output-bp1, $bp1) or not comparable($output-bp2, $bp2) {
            @debug "Output breakpoints: #{$output-bp1} and #{$output-bp2}, Chosen breakpoints: #{$bp1} and #{$bp2}";
        } @else if $output-bp2  >= $bp1 and $output-bp2 < $bp2 {
            @content;
        }
    }
}