joelkrause
8/30/2019 - 6:34 AM

Media queries based on bootstrap widths. min-width & max-width. min-width minuses 1px from the number so you don't need to hack the values :

Media queries based on bootstrap widths. min-width & max-width. min-width minuses 1px from the number so you don't need to hack the values :)

_mediaqueries.scss
content_copyfile_download
$sm: 576px; // Mobile
$md: 768px; // Tablet - Portrait
$lg: 1024px; // Tablet - Landscape
$xl: 1200px; // Large Desktop
$xxl: 1920px; // Larger Desktop

@mixin breakpoint($direction, $size) {
    @if $size=='sm' {
        $size: $sm;
    }

    @else if $size=='md' {
        $size: $md;
    }

    @else if $size=='lg' {
        $size: $lg;
    }

    @else if $size=='xl' {
        $size: $xl;
    }

    @else if $size=='xxl' {
        $size: $xxl;
    }

    @if $direction=='up' {
        $direction: 'min-width';
    }

    @else if $direction=='down' {
        $direction: 'max-width';
        $size: $size - 1;
    }

    // Now for the actual content!
    @media ($direction: $size) {
        @content;
    }
}