Check working example of Breakpoints in 'Grid System' page

Mixins for Breakpoints

    
    // Breakpoints
    $breakpoints: (
        xl: 1400px,
        lg: 1200px,
        md: 992px,
        sm: 768px,
        xs: 576px
    );
    
    // Mixin for generating media queries
    @mixin media($type, $size1, $size2: null) {
        $breakpoint-size1: map-get($breakpoints, $size1);
        
        @if not map-has-key($breakpoints, $size1) {
            @error "Breakpoint name '#{$size1}' does not exist in the breakpoints map.";
        }
        
        @if $type == 'up' {
        @media (min-width: $breakpoint-size1) {
            @content;
        }
        } @else if $type == 'down' {
        @media (max-width: $breakpoint-size1) {
            @content;
        }
        } @else if $type == 'between' {

        @if $size2 == null {
            @error "Type 'between' requires two breakpoint sizes.";
        }

        @if not map-has-key($breakpoints, $size2) {
            @error "Breakpoint name '#{$size2}' does not exist in the breakpoints map.";
        }
        
        $breakpoint-size2: map-get($breakpoints, $size2);
        @media (min-width: $breakpoint-size1) and (max-width: $breakpoint-size2 - 1px) {
            @content;
        }
        }
    }
    
    // Usage example
    .container {
        width: 100%;
        padding: 20px;
        
        @include media('up', md) {
            max-width: 960px;
            margin: 0 auto;
        }
        
        @include media('down', sm) {
            font-size: 14px;
        }
        
        @include media('between', sm, xl) {
            padding: 10px;
        }
    }
    
    

Mixins for Breakpoints with Orientation

    
    // Mixin for generating media queries based on orientation
    @mixin mediaOrientation($orientation, $minWidth, $maxWidth: null, $maxHeight: null) {
        // Check if the orientation is valid
        @if $orientation != 'landscape' and $orientation != 'portrait' {
            @error "Invalid orientation: '#{$orientation}'. Please use 'landscape' or 'portrait'.";
        }
        
        $breakpoint-size1: map-get($breakpoints, $minWidth);
        $breakpoint-size2: if($maxWidth != null, map-get($breakpoints, $maxWidth), null);
        
        // Orientation query
        $orientation-query: "(orientation: #{$orientation})";
        
        // Generate media query
        @media #{$orientation-query} {
            @if $maxWidth != null {
            @media (min-width: #{$breakpoint-size1}) and (max-width: #{$breakpoint-size2}) {
                @content;
            }
            } @else {
            @media (min-width: #{$breakpoint-size1}) {
                @content;
            }
            }
        }
    }
    
    // Usage example
    .container {
        width: 100%;
        padding: 20px;
        
        @include mediaOrientation('landscape', sm, md) {
            // Styles for landscape mode with min-width: sm and max-width: md
        }
        
        @include mediaOrientation('portait', xs, sm, 600px) {
            // Styles for portrait mode with min-width: xs, max-width: sm, and max-height: 600px
        }
    }