Sass Media Queries

mixins.scss

// mixins for responsiveness
@mixin media-breakpoint-up($screen-type) {
    @if $screen-type == xxs {
      @media(min-width: 399.98px) {
        @content;
      }
    }
    @if $screen-type == xs {
      @media(min-width: 575.98px) {
        @content;
      }
    }
    @if $screen-type == sm {
      @media(min-width: 767.98px) {
        @content;
      }
    }
    @if $screen-type == md {
      @media(min-width: 991.98px) {
        @content;
      }
    }
    @if $screen-type == lg {
      @media(min-width: 1199.98px) {
        @content;
      }
    }
    @if $screen-type == 4k {
      @media(min-width: 2550px) {
        @content;
      }
    }
  }
  
  @mixin media-breakpoint-down($screen-type) {
    @if $screen-type == xxxxxs {
      @media(max-width: 320px) {
        @content;
      }
    }
    @if $screen-type == xxxxs {
      @media(max-width: 375px) {
        @content;
      }
    }
    @if $screen-type == xxxs {
      @media(max-width: 400px) {
        @content;
      }
    }
    @if $screen-type == xxs {
      @media(max-width: 425px) {
        @content;
      }
    }
    @if $screen-type == xs {
      @media(max-width: 576px) {
        @content;
      }
    }
    @if $screen-type == sm {
      @media(max-width: 768px) {
        @content;
      }
    }
    @if $screen-type == md {
      @media(max-width: 992px) {
        @content;
      }
    }
    @if $screen-type == lg {
      @media(max-width: 1200px) {
        @content;
      }
    }
    @if $screen-type == lg2 {
      @media(max-width: 1300px) {
        @content;
      }
    }
    @if $screen-type == lg3 {
      @media(max-width: 1366px) {
        @content;
      }
    }
  }