Approach to reduce SASS generated lines

Question

In my curently workflow, I use some mixins to easier responsive breakpoints code. I also use gulp to process and compress those generated CSS. Example below:

#footer {
  .block-contacts {
    .social_title {
      display: block;

      @include desktop() {
        display: inline-block
      }

      &:before {
        width: 100vw;

        @include desktop() {
          width: 50vw;
        }
      }
    }
  }
}

After the process of compile and minify, this code above ends up repeating the @media rule, like this:

#footer .block-contacts .social_title {
  display: block;
}
@media(min-width: 64rem){
    #footer .block-contacts .social_title {
        display:inline-block
    }
}
#footer .block-contacts:before {
    width:100vw;
}
@media(min-width: 64rem){
    #footer .block-contacts:before {
        width:50vw
    }
}

In this example I used only a "small" hierarchy and selector, but this in the whole project I guess it could be a negative impact for performance or assets size.

I know I can avoid this duplicity recreating the rule structure inner a single @include desktop() at the end of file.

My question is if there is another way, authomated, to reduce those lines creation, something I can do in the mixin that join all of this calls, or some gulp process/plugin, or even in the SASS...