$maxMobileWidth: 640px; $maxTabletWidth: 1079px; $ultrawideMinWidth: 1600px; // --- mobMaxW --- tabMaxW --------------- ultrawideMinW // mobile | tablet | desktop | ultrawide @mixin forSize($size) { @if $size == mobile { @media screen and (max-width: $maxMobileWidth) { @content; } } @else if $size == tablet { @media screen and (min-width: $maxMobileWidth + 1) and (max-width: $maxTabletWidth) { @content; } } @else if $size == desktop { @media screen and (min-width: $maxTabletWidth + 1) and (max-width: $ultrawideMinWidth - 1) { @content; } } @else if $size == ultrawide { @media screen and (min-width: $ultrawideMinWidth) { @content; } } @else if $size == notMobile { @media screen and (min-width: $maxMobileWidth + 1) { @content; } } }