Skip to content

Instantly share code, notes, and snippets.

@galpratama
Forked from peschee/sass-responsive-mixin.scss
Created February 25, 2016 11:09
Show Gist options
  • Save galpratama/ce391474eb5b7672a356 to your computer and use it in GitHub Desktop.
Save galpratama/ce391474eb5b7672a356 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; }
}
}
@galpratama
Copy link
Author

How to use

.profile-pic {
  float: left;
  width: 250px;
  @include respond-to(phone) { width: 100% ;}
  @include respond-to(tablet-portrait) { width: 125px; }
  @include respond-to(tablet-landscape-desktop) { float: none; }
  @include respond-to(132) { background: red; }
}

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