Skip to content

Instantly share code, notes, and snippets.

@isaacdanielanderson
Created April 7, 2018 05:14
Show Gist options
  • Save isaacdanielanderson/a09cba1c569bbe067bf652682168c25b to your computer and use it in GitHub Desktop.
Save isaacdanielanderson/a09cba1c569bbe067bf652682168c25b to your computer and use it in GitHub Desktop.
SASS BS4 Mixins
@mixin breakpoint($class) {
@if $class == xs {
@media (max-width: 767px) { @content; }
}
@else if $class == sm {
@media (min-width: 768px) { @content; }
}
@else if $class == md {
@media (min-width: 992px) { @content; }
}
@else if $class == lg {
@media (min-width: 1200px) { @content; }
}
@else {
@warn "Breakpoint mixin supports: xs, sm, md, lg";
}
}
@isaacdanielanderson
Copy link
Author

Example:
@media breakpoint(md) { text-align: left; }

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