Media Queries Breakpoints: Mobile First

mq.scss

//- Media Queries

$mp: 20em; // (min-width: 320px)
$sp: 30em; //? (min-width: 480px)
$sm: 36em; // (min-width: 576px)
$md: 48em; // (min-width: 768px)
$lg: 62em; // (min-width: 992px)
$de: 64em; //? (min-width: 1024px)
$xl: 75em; // (min-width: 1200px)

//- Breakpoints ($bp)

@mixin mq($bp) {

    @if $bp == mp {
        @media (min-width: $mp) {
            @content;
        }
    }

    @if $bp == sx {
        @media (min-width: $sp) {
            @content;
        }
    }

    @else if $bp == sm {
        @media (min-width: $sm) {
            @content;
        }
    }

    @else if $bp == md {
        @media (min-width: $md) {
            @content;
        }
    }

    @else if $bp == lg {
        @media (min-width: $lg) {
            @content;
        }
    }

    @else if $bp == de {
        @media (min-width: $de) {
            @content;
        }
    }

    @else if $bp == xl {
        @media (min-width: $xl) {
            @content;
        }
    }
}

@include mq(xl) {
  @content;
}