by
back

Bootstrap 3 SASS Responsive Mixins (Update 2)

Many thanks to Peschee and AmoHoban who published this code at their Gist.
See https://gist.github.com/peschee/5734414 for more information.

SASS Mixin

// Sass Mixin 
// Named Breakpoints are phone, tablet-portrait, tablet-landscape-desktop, large-desktop, non-retina, retina
@mixin respond-to($media) {
    /* Landscape phones and down */
    @if $media == xs {
        @media (max-width: 767px) { @content; }
    }
    /* Landscape phone to portrait tablet */
    @else if $media == sm {
        @media (min-width: 768px) and (max-width: 991px) {@content; }
    }
    /* Portrait tablet to landscape and desktop */
    @else if $media == md {
        @media (min-width: 992px) and (max-width: 1199px) { @content; }
    }
    /* desktop and large desktop */
    @else if $media == lg {
        @media (min-width: 1200px) and (max-width: 1439px) { @content; }
    }
}

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

Use it from wherever you want:

Sass Mixin to address the .hero-class on Phones and portrait Tablets

.hero {
   height:5em; 
   @include respondto (xs, sm, md) {
      height: 2em;
   }
}
comments powered by Disqus