media queries in scss

1$media-desktop: "only screen and (max-width : 1024px)";
2$media-tablet: "only screen and (max-width : 768px)";
3$media-mobile: "only screen and (max-width : 600px)";
4$media-mobile-sm: "only screen and (max-width : 480px)";
5
6
7@media #{$media-desktop} {
8  background: red;
9}
10
11@media #{$media-tablet} {
12  background: red;
13}
14
15@media #{$media-mobile} {
16  background: red;
17}
18
19@media #{$media-mobile-sm} {
20  background: red;
21}
22

1@mixin breakpoint($size) {
2    @if $size == mobile {
3      @media (max-width: 599px) { @content; }
4    } @else if $size == tablet-portrait-up {
5      @media (min-width: 600px) { @content; }
6    } @else if $size == tablet-landscape-up {
7      @media (min-width: 768px) { @content; }
8    } @else if $size == laptop-desktop {
9      @media (min-width: 992px) { @content; }
10    } @else if $size == extra-large-devices {
11      @media (min-width: 1200px) { @content; }
12    }
13}
14
15.header{
16    height: 10vh;
17    display: flex;
18    justify-content: space-between;
19    border-bottom: 2px solid black;
20}

1@mixin breakpoint($size) {
2    @if $size == mobile {
3      @media (max-width: 599px) { @content; }
4    } @else if $size == tablet-portrait-up {
5      @media (min-width: 600px) { @content; }
6    } @else if $size == tablet-landscape-up {
7      @media (min-width: 900px) { @content; }
8    } @else if $size == desktop-up {
9      @media (min-width: 1200px) { @content; }
10    } @else if $size == big-desktop-up {
11      @media (min-width: 1800px) { @content; }
12    }
13}
14/* used in this .scss file*/
15.logo{
16    &__link{
17       &__img{
18        @include breakpoint(mobile) {
19            width:30%; 
20          }
21          width:20%;
22          height:auto; 
23       } 
24    }
25}

1    // respond is the name of your mixin
2
3    @mixin respond ($breakpoint) {
4
5        // $breakpoint is simply a variable that can have several values
6
7        @if $breakpoint==tablet {
8
9            // here `laptop` is the value of $breakpoint
10            // when call laptop, we mean the following piece of code        
11
12        @media only screen and (max-width: 600px) {
13          @content;
14        }
15      }
16
17      @if $breakpoint==mobile {
18        @media only screen and (max-width: 480px) {
19          @content;
20        }
21      }
22    }
23

1
2  @media #{$small-and-down} {
3    // styles for small screens and down
4  }
5  @media #{$medium-and-up} {
6    // styles for medium screens and larger
7  }
8  @media #{$medium-and-down} {
9    // styles for medium screens and down
10  }
11  @media #{$large-and-up} {
12    // styles for large screens and up
13  }
14  @media #{$extra-large-and-up} {
15    // styles for extra large screens and up
16  }
17            

1$size__site_content_width: 1024px;
2
3/* Media Queries */ Not necessarily correct, edit these at will 
4$media_queries : (
5    'mobile'    : "only screen and (max-width: 667px)",
6    'tablet'    : "only screen and (min-width: 668px) and (max-width: $size__site_content_width)",
7    'desktop'   : "only screen and (min-width: ($size__site_content_width + 1))",
8    'retina2'   : "only screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)",
9    'retina3'   : "only screen and (-webkit-min-device-pixel-ratio: 3) and (min-resolution: 288dpi)",
10    'landscape' : "screen and (orientation:landscape) ",    
11    'portrait'  : "screen and (orientation:portrait) "
12);
13
14@mixin for_breakpoint($breakpoints) {
15    $conditions : ();
16    @each $breakpoint in $breakpoints {
17        // If the key exists in the map
18        $conditions: append(
19            $conditions,
20            #{inspect(map-get($media_queries, $breakpoint))},
21            comma
22        );
23    }
24
25    @media #{$conditions} {
26        @content;
27    }
28
29}
30