Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple responsive breakpoint mixin that takes both attribute names and custom widths. See https://medium.com/p/889927b37740/
@mixin breakpoint($min: 0, $max: 0) {
$type: type-of($min);
@if $type == string {
@if $min == xs {
@media (max-width: 767px) { @content; } // Mobile Devices
}
@else if $min == sm {
@media (min-width: 768px) { @content; } // Tablet Devices
}
@else if $min == md {
@media (min-width: 992px) { @content; } // Desktops
}
@else if $min == lg {
@media (min-width: 1200px) { @content; } // Widescreen Desktops
}
// Otherwise pass a warning to the compiler as to the appropriate options
@else {
@warn "The breakpoint mixin supports the following attributes: xs, sm, md, lg";
}
}
@else if $type == number {
// Allow for custom parameters for min and max size
$query: "all" !default;
@if $min != 0 and $max != 0 { $query: "(min-width: #{$min}) and (max-width: #{$max})"; } // set both min and max
@else if $min != 0 and $max == 0 { $query: "(min-width: #{$min})"; } // set just min
@else if $min == 0 and $max != 0 { $query: "(max-width: #{$max})"; } // set just max
@media #{$query} { @content; }
}
}
@alienlebarge

This comment has been minimized.

Copy link

commented May 15, 2014

Great mixin ! Thx

@gebeer

This comment has been minimized.

Copy link

commented Jul 24, 2014

Thank you, this is great.
One suggestion:
When using it with bootstrap 3 you could substitute the px values for min-width and max-width with the default bs variables.
So the first part of the mixin would read

  @if $class == xs {
    @media (max-width: ($screen-sm - 1)) { @content; }
  }

  @else if $class == sm {
    @media (min-width: $screen-sm) { @content; }
  }

  @else if $class == md {
    @media (min-width: $screen-md) { @content; }
  }

  @else if $class == lg {
    @media (min-width: $screen-lg) { @content; }
  }
@timknight

This comment has been minimized.

Copy link
Owner Author

commented Sep 12, 2014

If you've liked using this breakpoint mixin you might like my recent revision here which I talk about in my blog post.

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.