Media queries in scss

$size__site_content_width: 1024px;

/* Media Queries */ Not necessarily correct, edit these at will 
$media_queries : (
    'mobile'    : "only screen and (max-width: 667px)",
    'tablet'    : "only screen and (min-width: 668px) and (max-width: $size__site_content_width)",
    'desktop'   : "only screen and (min-width: ($size__site_content_width + 1))",
    'retina2'   : "only screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)",
    'retina3'   : "only screen and (-webkit-min-device-pixel-ratio: 3) and (min-resolution: 288dpi)",
    'landscape' : "screen and (orientation:landscape) ",    
    'portrait'  : "screen and (orientation:portrait) "
);

@mixin for_breakpoint($breakpoints) {
    $conditions : ();
    @each $breakpoint in $breakpoints {
        // If the key exists in the map
        $conditions: append(
            $conditions,
            #{inspect(map-get($media_queries, $breakpoint))},
            comma
        );
    }

    @media #{$conditions} {
        @content;
    }

}

Source: stackoverflow.com

Similar codes

76 votes323 views6 answers
Display flex css
CSS
4 votes269 views1 answer
Overflow dottet
CSS
50 votes280 views3 answers
How to center in absolute position
CSS
1 vote352 views2 answers
Change nav background color on scroll css without bootstrap
CSS Bootstrap
5 votes320 views4 answers
Display none tailwind
CSS
1 vote285 views1 answer
Unknown function 'mat-palette'
CSS
6 votes284 views3 answers
Print css media query
CSS
12 votes287 views3 answers
Vertical and horizontal align center div
CSS
14 votes268 views2 answers
How to render css in flask link
CSS
3 votes281 views1 answer
How to style rule to apply the Border Box model css
CSS