scss Mixin Media查询段SASS

Posted 2021-05-17

$mobile-width: 320px;
$smartphone-width: 576px;
$tablet-width: 768px;
$sm-desktop-width: 992px;
$desktop-width: 1280px;

@mixin smartphone {
  @media (min-width: 0px) and (max-width: #{$smartphone-width - 1px}) {
    @content;
  }
}

@mixin mobile {
  @media (min-width: 0px) and (max-width: #{$tablet-width - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin sm-desktop {
  @media (min-width: #{$sm-desktop-width}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}