SASS Responsive Shortcuts for Bootstrap 4

/*

Canbe edited for Bootstrap 3

Not originally my idea but I haven't been able to find the article I got the idea from.

Makes more sense to use this than manual media queries. 

John Camacho
Nov 2 2018

*/


$xs-width: 576px;
$sm-width: 576px;
$md-width: 768px;
$lg-width: 992px;
$xl-width: 1200px;
$xxl-width: 1366px;

@mixin xs-width {
    @media screen and (min-width: 0px) and (max-width: #{$sm-width - 1px}) {
        @content;
    }
}

@mixin sm-width {
    @media screen and (min-width: #{$sm-width}) and (max-width: #{$md-width - 1px}) {
        @content;
    }
}

@mixin md-width {
    @media screen and (min-width: #{$md-width}) and (max-width: #{$lg-width - 1px}) {
        @content;
    }
}

@mixin lg-width {
    @media screen and (min-width: #{$lg-width}) and (max-width: #{$xl-width - 1px}) {
        @content;
    }
}

@mixin xl-width {
    @media screen and (min-width: #{$xl-width}) and (max-width: #{$xxl-width - 1px}) {
        @content;
    }
}

@mixin xxl-width {
    @media screen and (min-width: #{$xxl-width}) {
        @content;
    }
}

// AND ABOVE
@mixin xs-width-and-above {
    @media screen and (min-width: 0px) {
        @content;
    }
}

@mixin sm-width-and-above {
    @media screen and (min-width: #{$sm-width}) {
        @content;
    }
}

@mixin md-width-and-above {
    @media screen and (min-width: #{$md-width}) {
        @content;
    }
}

@mixin lg-width-and-above {
    @media screen and (min-width: #{$lg-width})  {
        @content;
    }
}

@mixin xl-width-and-above {
    @media screen and (min-width: #{$xl-width}) {
        @content;
    }
}

//AND BELOW
@mixin xs-width-and-below {
    @media screen and (max-width: #{$sm-width - 1px}) {
        @content;
    }
}

@mixin sm-width-and-below {
    @media screen and (max-width: #{$md-width - 1px}) {
        @content;
    }
}

@mixin md-width-and-below {
    @media screen and (max-width: #{$lg-width - 1px}) {
        @content;
    }
}

@mixin lg-width-and-below {
    @media screen and (max-width: #{$xl-width - 1px}) {
        @content;
    }
}

@mixin xl-width-and-below {
    @media screen and (max-width: #{$xxl-width - 1px}) {
        @content;
    }
}

@mixin xxl-width-and-below {
    @media screen and (min-width: #{$xxl-width}) {
        @content;
    }
}