breakpoints.scss
523 Bytes
$breakpoints: (
'xs': ( min-width: 480px ),
'sm': ( min-width: 768px ),
'md': ( min-width: 992px ),
'lg': ( min-width: 1200px )
) !default;
@mixin respond-to($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@media #{inspect(map-get($breakpoints, $breakpoint))} {
@content;
}
}
@else {
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+ "Available breakpoints are: #{map-keys($breakpoints)}.";
}
}