scss 移动第一个Sass mixin用于常见断点

Posted 2021-05-18

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