Respond media use min-width with scss.
// BreakPoint
$break-xl: 1280px;
$break-lg: 1024px;
$break-md: 768px;
$break-sm: 640px;
@mixin respond-to($media) {
@if $media == xl {
@media only screen and (min-width: $break-xl) {
@content;
}
} @else if $media == lg {
@media only screen and (min-width: $break-lg) and (max-width: $break-xl - 1px) {
@content;
}
} @else if $media == md {
@media only screen and (min-width: $break-md) and (max-width: $break-lg - 1px) {
@content;
}
} @else if $media == sm {
@media only screen and (min-width: $break-sm) and (max-width: $break-md - 1px) {
@content;
}
}
}