scss 响应式媒体查询Mixin

Posted 2021-05-17

$respond-to-queries: (
  smartphone: 'all and (max-width: 600px)',
  tablet-portrait: 'all and (max-width: 768px)',
  tablet: 'all and (max-width: 1024px)'
);

@mixin respond-to($query) {
  $media_query: $query;
  @if map-has-key($respond-to-queries, $query) {
    $media_query: map-get($respond-to-queries, $query);
  }

  @media #{$media_query} {
    @content;
  }
}