refactor(breakpoint): simplify @mixin respond

This commit is contained in:
Jimmy 2021-06-20 12:15:07 +02:00
parent 1b04ae3323
commit 843fb9805f

View File

@ -1,32 +1,19 @@
$on-phone: 640px; $breakpoints: (
$on-tablet: 768px; sm: 640px,
$on-desktop: 1024px; md: 768px,
$on-desktop-large: 1280px; lg: 1024px,
xl: 1280px,
2xl: 1536px,
);
@mixin respond($breakpoint) { @mixin respond($breakpoint) {
@if ($breakpoint == sm) { @each $bp, $size in $breakpoints {
@media (min-width: 640px) { @if not map-has-key($breakpoints, $breakpoint) {
@content; @warn "'#{$breakpoint}' is not a valid breakpoint";
} } @else {
} @media (min-width: $size) {
@if ($breakpoint == md) {
@media (min-width: 768px) {
@content;
}
}
@if ($breakpoint == lg) {
@media (min-width: 1024px) {
@content;
}
}
@if ($breakpoint == xl) {
@media (min-width: 1280px) {
@content;
}
}
@if ($breakpoint == 2xl) {
@media (min-width: 1536px) {
@content; @content;
} }
} }
} }
}