Skip to content

Instantly share code, notes, and snippets.

@kirkonrails
Last active November 14, 2022 16:36
Show Gist options
  • Save kirkonrails/2140c3eeb77b9428abc8 to your computer and use it in GitHub Desktop.
Save kirkonrails/2140c3eeb77b9428abc8 to your computer and use it in GitHub Desktop.
Bootstrap Breakpoints SASS mixin
@mixin breakpoint($minWidth: 0, $maxWidth: 0, $minHeight: 0, $maxHeight: 0) {
$type: type-of($minWidth);
@if $type == string {
$class: $minWidth;
@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";
}
}
@else if $type == number {
$widthQuery: "all" !default;
// width
@if $minWidth != 0 and $maxWidth != 0 {
$widthQuery: "(min-width: #{$minWidth}) and (max-width: #{$maxWidth})";
}
@else if $minWidth != 0 and $maxWidth == 0 {
$widthQuery: "(min-width: #{$minWidth})";
}
@else if $minWidth == 0 and $maxWidth != 0 {
$widthQuery: "(max-width: #{$maxWidth})";
}
// height
$heightQuery: 0;
@if $minHeight != 0 and $maxHeight != 0 {
$heightQuery: "(min-height: #{$minHeight}) and (max-height: #{$maxHeight})";
}
@else if $minHeight != 0 and $maxHeight == 0 {
$heightQuery: "(min-height: #{$minHeight})";
}
@else if $minHeight == 0 and $maxHeight != 0 {
$heightQuery: "(max-height: #{$maxHeight})";
}
@if $minHeight != 0{
@media #{$widthQuery} and #{$heightQuery} {
@content;
}
}
@else if $maxHeight != 0{
@media #{$widthQuery} and #{$heightQuery} {
@content;
}
}
@else if $minHeight != 0 and $maxHeight != 0{
@media #{$widthQuery} and #{$heightQuery} {
@content;
}
}
@else {
@media #{$widthQuery} {
@content;
}
}
}
}
// EXAMPLES:
//@include breakpoint($maxWidth: 700px, $minWidth: 500px, $maxHeight: 1500px, $minHeight: 600px){
// @include breakpoint($min: 400px, $max: 500px) {
// background-color: red;
// }
// aside.primary {
// @include breakpoint(md) {
// float: right;
// width: 350px;
// }
// @include breakpoint(480px) {
// display: none;
// }
// @include breakpoint($min: 640px, $max: 767px) {
// text-align: center;
// font-style: italic;
// }
// }
@marteenzh
Copy link

This helped SO much in trying to convert a Wordpress theme to a Drupal one. Thank you!

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