@use 'sass:map'; @use 'sass:math'; @use 'sass:meta'; @use 'breakpoints' as *; @mixin mq($size) { @if map.has-key($breakpoints, $size) { $breakpoint: map-get($breakpoints, $size); @media screen and (min-width: $breakpoint) { @content; } } @else if meta.type-of($size) == number { @if math.is-unitless($size) { @error 'when using a number with @mq() make sure to include a unit'; } @else { @media screen and (min-width: $size) { @content; } } } @else { @error 'the keyword #{$size} is not in the $breakpoints map'; } }