Mobile first Sass mixin for common breakpoints
// iPhone, min-width: 320px
// mobile, min-width: 480px
// tablet, min-width: 768px
// laptop, min-width: 992px
// desktop, min-width: 1200px
@mixin respond-to($breakpoint) {
@if $breakpoint == "iphone" {
@media (min-width: 320px) {
@content;
}
}
@else if $breakpoint == "mobile" {
@media (min-width: 480px) {
@content;
}
}
@else if $breakpoint == "tablet" {
@media (min-width: 768px) {
@content;
}
}
@else if $breakpoint == "laptop" {
@media (min-width: 992px) {
@content;
}
}
@else if $breakpoint == "desktop" {
@media (min-width: 1200px) {
@content;
}
}
}