sass 响应式混入

common.scss

$breakpoints: (
  'phone': (320px, 480px),
  'pad': (481px, 768px),
  'notebook': (769px, 1024px),
  'desktop': (1025px, 1200px),
  'tv': 1201px
);

@mixin respondTo($media) {
  $dp: map-get($breakpoints, $media);

  @if type-of($dp) == 'list' {
    $min: nth($dp, 1);
    $max: nth($dp, 2);

    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  }

  @else {
    @media (min-width: $dp) {
      @content;
    }
  }
}


/* 使用方法 Usage */
/*
  .header {

    @include respondTo('phone') {
      // CSS here
      background-color: red;
    }

    @include respondTo('pad') {
      // CSS here
      background-color: blue;
    }
  }
*/

实现来源：https://www.bilibili.com/video/BV1TM4m167VN/