This is my go-to snippet when building breakpoint-based responsive websites with sass.
It consists of a map of breakpoints ($breakpoints) and a two mixins (media-min($bp) & media-max($bp)).
scss
$breakpoints: (
sm: 640px,
md: 768px,
lg: 1024px,
xl: 1280px,
);
@mixin media-min($bp) {
@media screen and (min-width: map_get($breakpoints, $bp) + 1) {
@content;
}
}
@mixin media-max($bp) {
@media screen and (max-width: map_get($breakpoints, $bp)) {
@content;
}
}To use it, call the mixin with the desired breakpoint:
scss
@include media-min('sm') {
// CSS goes here
}