responsive-sass-mixin.scss

$width-desktop:1024px;
$width-tablet:768px;
$width-smartphone:568px;
$width-scrollbar:20px;

// Media Queries
@mixin desktop {
  //PC表示: 768+20=788px〜
  @media only screen and (min-width: $width-tablet + $width-scrollbar) {
    @content;
  }
}
@mixin tablet {
  //タブレット表示: 568+20=588px 〜 768+20–1=787px
  @media only screen and (min-width: $width-smartphone + $width-scrollbar) and (max-width: $width-tablet + $width-scrollbar - 1) {
    @content;
  }
}
@mixin smartphone {
  //スマホ表示: 568+20–1=587px 〜
  @media only screen and (max-width: $width-smartphone + $width-scrollbar - 1) {
    @content;
  }
}