responsive mixin scss

$bp-small: 550px;
$bp-medium: 760px;
$bp-desktop: 1024px;
$bp-wide: 1680px;

@mixin res($breakpoint) {

  @if $breakpoint == wide {
    @media screen and (min-width: $bp-wide) {
      @content;
    }
  }

  @if $breakpoint == desktop {
    @media screen and (min-width: $bp-desktop) {
      @content;
    }
  }

  @if $breakpoint == tab {
    @media screen and (min-width: $bp-medium) {
      @content;
    }
  }

  @if $breakpoint == phone {
    @media screen and (min-width: $bp-small) {
      @content;
    }
  }
}

Piszemyn a poczatku kod dla widoku na telefonie,
pozniej jezeli chcemy zmienic cos dla rozdzielczosci np 1680px
to zamisat pisac @media only screen and (min-width: 16080px) {} 
wystarczy napisac @include res(wide) breakpointy jakie ustawilem to: 
domyslny czyli bez include 360px (minimalne jakie proponuje wspierac)
phone = 550px tab 760px desktop 1024px wide 1680.

np.
.main-title {
  font-size: 50px;
  line-height: 55px;
  font-weight: 800;

  @include res(phone) {
    font-size: 70px;
    line-height: 60px;
  }

  @include res(tab) {
    font-size: 110px;
    line-height: 90px;
  }