$breakpoints: (
'tablet' : ( min-width: 767px ),
'desktop': ( min-width: 1100px ),
'extra-wide': ( min-width: 2560px )
);
@mixin respond-to($name) {
@if map-has-key($breakpoints, $name) {
@media #{inspect(map-get($breakpoints, $name))} {
@content;
}
}
@else {
@warn 'Unfortunately, no value could be retrieved from `#{$breakpoints}`. '
+ 'Please make sure it is defined in `$breakpoints` map.';
}
}
SASS Responsive Breakpoints Mixin
cpcwood | Last updated:
Add to project mixins with defined breakpoints in $breakpoints
map.
Use mixin in CSS rule written in SCSS to design mobile-first. For example:
@use 'path/to/mixins' as *;
.header {
width: 100%;
@include respond-to(tablet) {
width: 767px;
}
}