Revised Breakpoint Mixin

breakpoint-v2.scss

$xs: ( max:  767px );
$sm: ( min:  768px );
$md: ( min:  992px );
$lg: ( min: 1200px );
$sm-only: ( min: map-get($sm, min), max: map-get($md, min) - 1 );
$md-only: ( min: map-get($md, min), max: map-get($lg, min) - 1 );

@mixin breakpoint($map) {
  $query: "";
  @if map-has-key($map, min) { $query: append($query, "(min-width: #{map-get($map, min)})") }
  @if map-has-key($map, min) and map-has-key($map, max) { $query: append($query, "and") }
  @if map-has-key($map, max) { $query: append($query, "(max-width: #{map-get($map, max)})") }
  @media screen and #{$query} { @content; }
}

Hi tim, thanks for sharing this, any idea how to make it DRY? so it's not repeating when outputing as css.

@SenoSulharyadi Sass doesn't combine media queries generated from different blocks if that's what you're asking. There is a gem that groups declarations into combined media queries if you're interested, but many have made the case that it doesn't actually make a significant difference to performance. It is an interesting issue to consider, but it sounds like it may be more of a philosophical argument than an actual performance concern.

I love the simplicity of this, but I couldn't get it to generate proper media queries. The output was malformed even when using the predefined map variables... (this is with Sass 3.4.x) I ended up using a similar mixin for the time being that you might also appreciate.
https://github.com/zellwk/mappy-breakpoints