【css】scssファイルでPC版とSP版のブレイクポイントを設定する方法

$breakpoint_sp: 767px;
$breakpoint_pc: 768px;

@mixin sp {
  @media screen and (max-width: $breakpoint_sp) {
    @content;
  }
}

@mixin pc {
  @media screen and (min-width: $breakpoint_pc) {
    @content;
  }
}

//使い方例
.container {
  @include pc {
    width: 980px;
    margin: 0 auto;
  }
  @include sp {
    width: 100%;
  }
}