Skip to content

Instantly share code, notes, and snippets.

@peschee
Last active February 3, 2022 16:14
Show Gist options
  • Save peschee/5734414 to your computer and use it in GitHub Desktop.
Save peschee/5734414 to your computer and use it in GitHub Desktop.
SASS responsive mixin (bootstrap breakpoints)
/**
* Responsive mixin. The media breakpoints are as defined
* in the twitter bootstrap framework:
*
* - phone
* - tablet-portrait
* - tablet-landscape-desktop
* - large-desktop
*
* Additional parameters for tagetting retina and non-retina
* devices
*
* - retina
* - non-retina
*
* Moreover, a specific value in px can be passed which is
* used to generate a max-width media query.
*/
@mixin respond-to($media) {
/* Landscape phones and down */
@if $media == phone {
@media (max-width: 480px) { @content; }
}
/* Landscape phone to portrait tablet */
@else if $media == tablet-portrait {
@media (max-width: 767px) {@content; }
}
/* Portrait tablet to landscape and desktop */
@else if $media == tablet-landscape-desktop {
@media (min-width: 768px) and (max-width: 979px) { @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; }
}
}
@amoHoban
Copy link

amoHoban commented Jan 1, 2014

for the new sass version you can now use this with multiple media queries, a time saver:

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

and then e.g.

.searchform {padding-left:10%;@include respondto(phone, tablet-portrait) {padding-left:0};}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment