Skip to content

Instantly share code, notes, and snippets.

@imjared
Last active August 16, 2016 10:13
Show Gist options
  • Save imjared/9b59c2db295acaefaac5 to your computer and use it in GitHub Desktop.
Save imjared/9b59c2db295acaefaac5 to your computer and use it in GitHub Desktop.
scss breakpoint helpers based on bootstrap
// breakpoint helpers based on bootstrap's breakpoints
@mixin xs {
@media #{screen} and (max-width: #{$screen-xs-max}) {
@content;
}
}
@mixin sm {
@media #{screen} and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max}) {
@content;
}
}
@mixin md {
@media #{screen} and (min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max}) {
@content;
}
}
@mixin lg {
@media #{screen} and (min-width: #{$screen-lg-min}) {
@content;
}
}
// inclusive mixins
@mixin sm-and-down {
@media #{screen} and (max-width: #{$screen-sm-max}) {
@content;
}
}
@mixin sm-and-up {
@media #{screen} and (min-width: #{$screen-sm-min}) {
@content;
}
}
@mixin md-and-down {
@media #{screen} and (max-width: #{$screen-md-max}) {
@content;
}
}
@mixin md-and-up {
@media #{screen} and (min-width: #{$screen-md-min}) {
@content;
}
}
// specific
@mixin breakpoint-max($w) {
@media #{$screen} and (max-width: $w) {
@content;
}
}
@mixin breakpoint-min($w) {
@media #{$screen} and (min-width: $w) {
@content;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment