SCSS: Group output by media queries

Question

In my SCSS, I use different partials for different types of styles.

E.g.

_buttons.scss

.btn {
    background:red;
}

@media only screen and (min-width: 768px) {
    .btn {
        font-size:10px;
    }
}

@media only screen and (min-width: 992px) {
    .btn {
        font-size:20px;
    }
}

_slideshow.scss

.slideshow {
    background:green;
}

@media only screen and (min-width: 768px) {
    .slideshow {
        font-size:12px;
    }
}

@media only screen and (min-width: 992px) {
    .slideshow {
        font-size:24px;
    }
}

screen.scss

@import "buttons";
@import "slideshow";

Using partials in this way makes it easier to re-use code between projects. For example, if I have a project that doesn't need slideshow, I can just omit _slideshow.scss.

The downside with this method is that media query bits (e.g. @media only screen and) get repeated several times in the final CSS, which can quickly result in bloated code.

Is there anyway I can keep my partials as they are, but tell scss to group them together in the output, so all the min-width: 768px are grouped together in one query and all the min-width: 992px are in one query.

E.g. so the output is as follows:

.btn {
    background:red;
}

.slideshow {
    background:green;
}

@media only screen and (min-width: 768px) {
    .btn {
        font-size:10px;
    }

    .slideshow {
        font-size:12px;
    }

}

@media only screen and (min-width: 992px) {
    .btn {
        font-size:20px;
    }

    .slideshow {
        font-size:24px;
    }

}

I know I could create a separate partial for each query, and then import them into another sheet and wrap them in a query, but then that starts to become complex to maintain.

Answer 1

Maybe in future versions.

But there's no really so a huge difference between keeping them combined or separated. You could make a test on this site: http://aaronjensen.github.io/media_query_test

There's a difference, but it isn't really a difference that a user will realize.