使用scss实现响应式布局

@use 'sass:map';
@use 'sass:meta';
@use 'sass:list';

$breakPoints: (
  'phone': (
    0px,
    768px,
  ),
  'desktop': 768px,
);

@mixin ResponseTo($name) {
  $bp: map.get($breakPoints, $name);
  @if meta.type-of($bp) == 'list' {
    $min: list.nth($bp, 1);
    $max: list.nth($bp, 2);
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else {
    @media (min-width: $bp) {
      @content;
    }
  }
}

使用示例

@import 'path/to/scss' .my-element {
  width: 100%;

  @include ResponseTo('phone') {
    font-size: 14px;
  }

  @include ResponseTo('pad') {
    font-size: 16px;
  }

  @include ResponseTo('desktop') {
    font-size: 18px;
  }
}