Can we nest media queries (SASS) that doesn't add to the overall size of the compiled output via Gulp?

Question

Using Gulp: The idea is to write media queries inline and nest as needed but in the compiled source they are nested under a singular media query. Ideas on if this is currently possible?

Example:

.selector {
    background-color: #efefef;
    @media screen and (min-width: $break-tabletSmall) { 
        background-color: #000;
    }
}
.selector-2 {
    background-color: #ddd;
    @media screen and (min-width: $break-tabletSmall) { 
        background-color: #fff;
    }
}

This currently compiles into something like this:

.selector {
    background-color: #efefef;
}
@media screen and (min-width: $break-tabletSmall) { 
    .selector {
        background-color: #000;
    }
}
.selector-2 {
    background-color: #ddd;
}
@media screen and (min-width: $break-tabletSmall) { 
    .selector-2 {
        background-color: #fff;
    }
}

The desired outcome: Note the size is a bit smaller as there is a singular media query referenced.

.selector {
    background-color: #efefef;
}
.selector-2 {
    background-color: #ddd;
}
@media screen and (min-width: $break-tabletSmall) { 
    .selector {
        background-color: #000;
    }   
    .selector-2 {
        background-color: #fff;
    }
}

Answer 1

This issue in Sass Github is related to this problem. And you have this:

These optimizations are no longer planned. Sass does what it can to eliminate extra whitespace and choose the smallest possible representation for values, but it's primary focus is being the best preprocessing language it can be rather than the best CSS compressor.

So actually you should use PostCSS and maybe postcss-combine-media-query plugin. Or I found this gulp plugin. My recommendation for CSS optimizations and compression is PostCSS.

But if you want to solve this issue only with Sass, you can use output buffering as said by heygrady in the issue linked above.