Can it possible generate media query only one time in compiled css when i include two time media query in sass file?

Question

Can it possible when I include any media query twice and generate media query in style.css only once. I was trying to create variable and mixin function and include in my style.scss file twice, and it generates @media (max-width: 991px) {} twice, but when I include a media query many times, like ipad and generate only once in my style.css file. Please help me. I attached some my files code please check.

Thanks in advance.

// This is my breakpoints key and value variable
$breakpoints: (
  'desktop':  1600px,
  'laptop': 1199px,
  'ipad':  991px,
  'mobile':  767px,
  'small-device':  575px
) !default;

// This is my media query mixin
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media ($media-max: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } 
  @else {
    @warn "Sorry unfortunately, no value could be retrieved from `#{$breakpoint}`. ";
  }
}


// This is my selector sass include two times ipad query means compile and generate two times media query in complied css
.example {
   ul {
    li {
        font-size: 50px;
        @include respond-to('ipad') {
                font-size: 40px;
        }
        a {
            font-size: 30px;
            @include respond-to('ipad') {
                font-size: 18px;
            }
        }
    }
  }
}

// generated css style.css seen two time generate @media
@media (max-width: 991px) {
    .example ul li {
        font-size: 40px;
    }
}
@media (max-width: 991px) {
    .example ul li a {
        font-size: 18px;
    }
}

Answer 1

等待大神答复