scss CSS响应切换器mixin

Posted 2021-05-18

/*Define breakpoints  */
$sm: 568px;
$md: 768px;
$lg: 992px;
$xl: 1200px;

/* Responsive switcher */
@mixin respond($size) {

  @if $size == 'sm' {
    @media (min-width: $sm) {
      @content;
    }
  }
  @if $size == 'md' {
    @media (min-width: $md) {
      @content;
    }
  }
  @if $size == 'lg' {
    @media (min-width: $lg) {
      @content;
    }
  }
  @if $size == 'xl' {
    @media (min-width: $xl) {
      @content;
    }
  }

  /* Usage - include inline responsive styling in .scss files */
  @include respond(sm) { /* Styling here*/ };
  @include respond(md) {};
  @include respond(lg) {};
  @include respond(xl) {};
}