Responsive with SASS Mixin use breakpoint on if condition

Responsive with SASS Mixin use breakpoint on if the condition

SCSS Code

_mixins.scss code

@mixin response($breakpoint) {
    @if($breakpoint == xl){
        @media(max-width: 1200px){
            @content;  
        }
    }
    
        @if($breakpoint == lg){
        @media(max-width: 1000px){
            @content;  
        }
    }
    
     @if($breakpoint == md){
        @media(max-width: 768px){
            @content;  
        }
    }
}

Use mixin in other SCSS files

.first-nav{
    grid-column: 7 / 10; 
    grid-row: 1 / 2; 
    @include navigation; 
    
    @include response(xl){
        grid-column: 6/10; // @content
    }
    
      @include response(lg){
        grid-column: 5/10; // @content
    }
    
     @include response(md){
        grid-column: 4/10; // @content
    }
    
}

.second-nav{
    grid-column: 1 /10; 
    grid-row: 3/4; 
    @include navigation; margin-top: 30px;  
    
     @include response(lg){
        grid-column: 1/10; // @content
    }
    
      @include response(md){
        grid-column: 1/-1; // @content
    }
    
    
}

CSS Output

    @media (max-width: 1200px) {
    .first-nav {
      grid-column: 6/10; } }
  @media (max-width: 1000px) {
    .first-nav {
      grid-column: 5/10; } }
  @media (max-width: 768px) {
    .first-nav {
      grid-column: 4/10; } }