$medium: 600px !default; $large: 900px !default; $xlarge: 1200px !default; $xxlarge: 1900px !default; $breakpoints: ( 'medium': $medium, 'large': $large, 'xlarge': $xlarge, 'xxlarge': $xxlarge ) !default; @mixin breakpoint($breakpoint) { // If the key exists in the map @if map-has-key($breakpoints, $breakpoint) { // Prints a media query based on the value @media (min-width: map-get($breakpoints, $breakpoint)) { @content; } } // If the key doesn't exist in the map @else { @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Available breakpoints are: #{map-keys($breakpoints)}."; } }