HappyJayXin
11/26/2019 - 3:18 AM

Respond media use min-width with scss.

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;
    }
  }
}