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

SCSS 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
@mixin fms($fz: $df, $fm: $dfm) {
  font-size: $fz;

  @media screen and (max-width: 600px) {
    font-size: $fm;
  }
}

// Media enquiries

@mixin lg($media) {
  @if $media == min-w {
    @media only screen and (min-width: $large) {
      @content;
    }
  }
}

@mixin md($media) {
  @if $media == max-w {
    @media only screen and (max-width: $large) {
      @content;
    }
  }
  @else if $media == med-w {
    @media only screen and (min-width: $medium + 1) and (max-width: $large - 1) {
      @content;
    }
  }
  @else if $media == min-w {
    @media only screen and (min-width: $medium) {
      @content;
    }
  }
}

@mixin sm($media) {
  @if $media == max-w {
    @media only screen and (max-width: $medium) {
      @content;
    }
  }
  @else if $media == med-w {
    @media only screen and (min-width: $small + 1) and (max-width: $medium - 1) {
      @content;
    }
  }
  @else if $media == min-w {
    @media only screen and (min-width: $small) {
      @content;
    }
  }
}

@mixin sml($media) {
  @if $media == max-w {
    @media only screen and (max-width: $small) {
      @content;
    }
  }
  @else if $media == med-w {
    @media only screen and (min-width: $smallm + 1) and (max-width: $small - 1) {
      @content;
    }
  }
  @else if $media == min-w {
    @media only screen and (min-width: $smallm) {
      @content;
    }
  }
}

@mixin xs($media) {
  @if $media == max-w {
    @media only screen and (max-width: $smallm) {
      @content;
    }
  }
  @else if $media == med-w {
    @media only screen and (min-width: $extrasmall + 1) and (max-width: $small - 1) {
      @content;
    }
  }
  @else if $media == min-w {
    @media only screen and (min-width: $extrasmall) {
      @content;
    }
  }
}