Bootstrap 3 SASS Mixins to Make Life Easier

gistfile1.sass

// From https://gist.github.com/peschee/5734414
// Modified for current version of bootstrap and added to by @randomdrake
@mixin respond-to($media) {
    /* Landscape phones and down */
    @if $media == phone {
        @media (max-width: 480px) { @content; }
    }
    /* Non-phone */
    @else if $media == non-phone {
        @media (min-width: 481px) { @content; }
    }
    /* Landscape phone to portrait tablet */
    @else if $media == tablet-portrait {
        @media (max-width: 767px) { @content; }
    }
    /* All stuff off the phone */
    @else if $media == off-phone {
        @media (min-width: 768px) {@content; }
    }
    /* Portrait tablet to landscape and desktop */
    @else if $media == tablet-landscape-desktop {
        @media (min-width: 768px) and (max-width: 992px) { @content; }
    }
    /* Tablet landscape, desktop, and below */
    @else if $media == tablet-desktop {
        @media (max-width: 992px) {@content; }
    }
    /* Off of Tablet */
    @else if $media == off-tablet {
        @media (min-width: 993px) { @content; }
    }
    /* Large desktop */
    @else if $media == large-desktop {
        @media (min-width: 1200px) { @content; }
    }
    // Non-Retina
    @else if $media == non-retina {
        @media screen and (-webkit-max-device-pixel-ratio: 1) { @content; }
    }
    // Retina Only
    @else if $media == retina {
        @media screen and (-webkit-min-device-pixel-ratio: 2) { @content; }
    }
    // Specific max width
    @else {
        @media only screen and (max-width: #{$media}px) { @content; }
    }
}

@mixin respondto($media) {
    @each $mediaType in $media {
        @include respond-to($mediaType) {@content}
    }
}