简单好用的sass媒体查询方法

variable.scss:

$grid-medium: 750px;
$grid-large: 990px;
$grid-widescreen: 1300px;

$small: 'small';
$medium: 'medium';
$medium-down: 'medium-down';
$medium-up: 'medium-up';
$large: 'large';
$large-down: 'large-down';
$large-up: 'large-up';
$widescreen: 'widescreen';

$grid-breakpoints: (
  $small '(max-width: #{$grid-medium - 1})',
  $medium '(min-width: #{$grid-medium}) and (max-width: #{$grid-large - 1})',
  $medium-down '(max-width: #{$grid-large - 1})',
  $medium-up '(min-width: #{$grid-medium})',
  $large '(min-width: #{$grid-large}) and (max-width: #{$grid-widescreen - 1})',
  $large-down '(max-width: #{$grid-widescreen - 1})',
  $large-up '(min-width: #{$grid-large})',
  $widescreen '(min-width: #{$grid-widescreen})'
);

mixin.scss:

@mixin media-query($media-query) {
  $breakpoint-found: false;

  @each $breakpoint in $grid-breakpoints {
    $name       : nth($breakpoint, 1);
    $declaration: nth($breakpoint, 2);

    @if $media-query==$name and $declaration {
      $breakpoint-found: true;

      @media only screen and #{$declaration} {
        @content;
      }
    }
  }

  @if $breakpoint-found==false {
    @warn 'Breakpoint "#{$media-query}" does not exist';
  }
}

使用方法:

.title {
  font-size: 24px;

  // 990 - 1300
  @include media-query($large) {
    font-size: 20px;
  }

  // 750 - 990
  @include media-query($medium) {
    font-size: 16px;
  }

  // 小于750
  @include media-query($small) {
    font-size: 12px;
  }
}

其余断点根据情况使用。