使用scss简化媒体查询

//https://blog.csdn.net/m0_46219714/article/details/132940786
$breakpoints: (
        "phone": (320px, 480px),
        "pad": (481px, 768px),
        "notebook": (769px, 1024px),
        "pc": (1025px, 1200px),
        "tv": 1201px,
);

@mixin respondTo($breakNames) {
  @if type-of($breakNames) == "list" {
    @each $breakName in $breakNames {
      $bp: map-get($breakpoints, $breakName);
      @if type-of($bp) == "list" {
        $min: nth($bp, 1);
        $max: nth($bp, 2);
        @media (min-width: $min) and (max-width: $max) {
          @content;
        }
      } @else {
        @media (min-width: $bp) {
          @content;
        }
      }
    }
  } @else {
    $bp: map-get($breakpoints, $breakNames);
    @if type-of($bp) == "list" {
      $min: nth($bp, 1);
      $max: nth($bp, 2);
      @media (min-width: $min) and (max-width: $max) {
        @content;
      }
    } @else {
      @media (min-width: $bp) {
        @content;
      }
    }
  }
}

使用：

可以传入字符串和数组，非常方便。爱了爱了！

.header {
    display: flex;
    width: 100%;
    background-color: pink;
    @include respondTo("phone") {
        height: 50px;
    }
    @include respondTo(['pad','phone']) {
        width: 25%;
    }
}

在上述示例中，我们首先检查传入的参数$breakNames的类型。如果是列表（数组），则使用@each指令遍历列表，并对每个元素调用相应的样式。如果是字符串，则直接使用该字符串作为参数调用相应的样式。

现在，您可以通过@include respondTo(pad)或@include respondTo(['pad', 'phone'])的方式来调用混合器，并在其中添加您想要的样式。

可以参考一下我这个项目：https://gitee.com/liuhaier/wai-jinguo

使用scss简化媒体查询

💬 COMMENT

👋友