how to use media query 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
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