定义 mixin

@mixin media-query($breakpoint) {
  @if $breakpoint == phone {
    @media (max-width: 767px) {
      @content;
    }
  } @else if $breakpoint == tablet {
    @media (min-width: 768px) and (max-width: 1023px) {
      @content;
    }
  } @else if $breakpoint == desktop {
    @media (min-width: 1024px) {
      @content;
    }
  }
}

使用 mixin

.container {
  width: 100%;
  
  @include media-query(tablet) {
    width: 80%;
  }
  
  @include media-query(desktop) {
    width: 60%;
  }
}