Skip to content

Instantly share code, notes, and snippets.

@timknight

timknight/breakpoint-v2.scss

Last active February 15, 2021 15:00
Show Gist options
  • Save timknight/b8adb5df5600c37fd567 to your computer and use it in GitHub Desktop.
Save timknight/b8adb5df5600c37fd567 to your computer and use it in GitHub Desktop.
Download ZIP
Revised Breakpoint Mixin
Raw
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; }
}
@ixley
Copy link

ixley commented Jul 2, 2015

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

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