sass 响应式

// 响应式适配
$breakpoints: (
  'xs': 'only screen and ( max-width: 325px)',
  'sm': 'only screen and ( max-width: 768px)',
  'md': 'only screen and ( max-width: 992px)',
  'lg': 'only screen and ( max-width: 1440px)'
) !default;

@mixin respond-to($breakpoint) {
  $query: map-get($breakpoints, $breakpoint);

  // 这里是scss error提示估计大部分人（包括我）都没怎么使用过
  @if not $query {
    /* stylelint-disable-next-line */
    @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';
  }

  /* stylelint-disable-next-line */
  @media #{ unquote($query), inspect($query)} {
    @content;
  }
}

@include respond-to(md) {
  font-size: 24px;
  line-height: 24px;
}