Let's say I have a mobile version and a desktop version of my website, and I use media queries to alter the styling:

.my-component{
    display: block;
    @media (max-width: 600px) {
        // mobile version
        width: 200px;
    }
    @media (min-width: 600px) {
        // desktop version
        width: 400px;
    }

Right now everything get put in one big .css file.

Is there a way to tell SASS to make 2 CSS files, one that strips out all the styling for the mobile media rule and another that strips out for the desktop media rule? I can then use media queries in my <link rel="stylesheet"... to include only what's needed?