@mixin phone {
  @media (max-width: #{$phone-width}) {
    @content;
  }
}
​
@mixin tablet {
  @media (max-width: #{$tablet-width}) {
    @content;
  }
}
​
@mixin desktop {
  @media (max-width: #{$desktop-width}) {
    @content;
  }
}
​
@mixin super {
  @media (max-width: #{$super-width}) {
    @content;
  }
}
​
@mixin max {
  @media (min-width: #{$super-width}) {
    @content;
  }
}
​
@mixin type($phone,$tablet,$desktop,$super,$lineheightratio,$font) {
  @include max {
    font: $super+px/($super*$lineheightratio)+px $font;
    //color: aqua;
  }
  @include super {
    font: $super+px/($super*$lineheightratio)+px $font;
    //color: black;
  }
  @include desktop {
    font: $desktop+px/($desktop*$lineheightratio)+px $font;
    //color: blue;
  }
  @include tablet {
    font: $tablet+px/($tablet*$lineheightratio)+px $font;
    //color: green;
  }
  @include phone {
    font: $phone+px/($phone*$lineheightratio)+px $font;
    //color: red;
  }
}