Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
respond-to() SASS mixin for Bootstrap 3 grid system.
.profile-pic {
float: left;
width: 250px;
@include respond-to(xs) {
width: 100%;
}
@include respond-to(sm) {
width: 125px;
}
@include respond-to(md) {
float: none;
}
}
// Variables
// ---------
// Extra small screen / phone
$screen-xs: 480px;
// Small screen / tablet
$screen-sm: 768px;
// Medium screen / desktop
$screen-md: 992px;
// Large screen / wide desktop
$screen-lg: 1200px;
// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm - 1);
$screen-sm-max: ($screen-md - 1);
$screen-md-max: ($screen-lg - 1);
// respond-to()
// ------------
@mixin respond-to($media) {
@if $media == xs {
@media (max-width: $screen-xs-max) { @content }
}
@else if $media == sm {
@media (min-width: $screen-sm) and (max-width: $screen-sm-max) { @content }
}
@else if $media == md {
@media (min-width: $screen-md) and (max-width: $screen-md-max) { @content }
}
@else if $media == lg {
@media (min-width: $screen-lg) { @content }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.