Concise Sass Mixin for Media Queries

If you want, jump to the codepen for this article first.
$breakpoints: (md: 616px, lg: 1000px, xl: 1288px);h1 {
@include at-each(2rem, md 3rem, lg 4rem) using ($size) {
font-size: $size;
}
}
h1 {
font-size: 2rem;
}
@media screen and (min-width: 616px) {
h1 {
font-size: 3rem;
}
}
@media screen and (min-width: 1000px) {
h1 {
font-size: 4rem;
}
}
@use "sass:map";$breakpoints: (md: 616px, lg: 1000px, xl: 1288px);@mixin at-each($map...) {
@each $bp, $arg in $map {
@if $arg {
@if map.has-key($breakpoints, $bp) {
$bp: map.get($breakpoints, $bp);
}
@media screen and (min-width: $bp) {
@content($arg);
}
} @else {
@content($bp);
}
}
}
.card {
border: 2px solid silver;
@include at-each(20px, md 30px, lg 40px) using ($padding) {
padding: $padding;
}
}
.cell {
@include at-each(750px 33.3%, lg 25%, 1250px 20%) using ($width) {
width: $width;
}
}

The Principal Engineer at Imarc, Erratic Author on Medium. Writing about web development and being a better web developer.