Полезные миксины для адаптирования проектов (.sass)

SASS responsive mixins

//-- В ФАЙЛ _vars.sass --//
//font-size
$df: 1em

//font-media
$dfm: 3.3vw

// Media enquiries 
$large: 1199px
$medium: 991px
$small: 767px
$smallm: 600px
$extrasmall: 320px


//-- В ФАЙЛ _mixins.sass
// font media style
=fms($fz: $df, $fm: $dfm)
  font-size: $fz
  @media screen and (max-width: 600px)
    font-size: $fm
    
// Media enquiries
=lg($media) //large
  @if $media == min-w
    @media only screen and (min-width: $large)
      @content
  // Exsample: +lg(min-w) 
  //            color: red

=md($media) //medium
  @if $media == max-w
    @media only screen and (max-width: $large)
      @content
  // Exsample: +md(max-w) 
  //            color: red
  @else if $media == med-w
    @media only screen and (min-width: $medium + 1) and (max-width: $large - 1)
      @content
  // Exsample: +md(med-w) 
  //            color: red
  @else if $media == min-w
    @media only screen and (min-width: $medium)
      @content
  // Exsample: +md(min-w) 
  //            color: red

=sm($media) //small
  @if $media == max-w
    @media only screen and (max-width: $medium)
      @content
  // Exsample: +sm(max-w) 
  //            color: red
  @else if $media == med-w
    @media only screen and (min-width: $small + 1) and (max-width: $medium - 1)
      @content
  // Exsample: +sm(med-w) 
  //            color: red
  @else if $media == min-w
    @media only screen and (min-width: $small)
      @content
  // Exsample: +sm(min-w) 
  //            color: red

=sml($media) //small-little
  @if $media == max-w
    @media only screen and (max-width: $small)
      @content
  // Exsample: +sml(max-w) 
  //            color: red
  @else if $media == med-w
    @media only screen and (min-width: $smallm + 1) and (max-width: $small - 1)
      @content
  // Exsample: +sml(med-w) 
  //            color: red
  @else if $media == min-w
    @media only screen and (min-width: $smallm)
      @content
  // Exsample: +sml(min-w) 
  //            color: red

=xs($media) //extra small
  @if $media == max-w
    @media only screen and (max-width: $smallm)
      @content
  // Exsample: +xs(max-w) 
  //            color: red
  @else if $media == med-w
    @media only screen and (min-width: $extrasmall + 1) and (max-width: $smallm - 1)
      @content
  // Exsample: +xs(med-w) 
  //            color: red
  @else if $media == min-w
    @media only screen and (min-width: $extrasmall)
      @content
  // Exsample: +xs(min-w) 
  //            color: red