有没有什么方法可以基于SCSS编写的媒体查询生成单独的样式表？

Question

.page--FAQ.is--mobile {
        .nav-wrapper {
            @media #{$medium-and-down} {
                min-height: 0;
            }
        }

        .navbar--search-title {
            @media #{$medium-and-down} {
                margin-bottom: calc(5.6rem - 64px);
            }

            @media #{$small-and-down} {
                margin-bottom: calc(5.6rem - 56px);
            }


            .nav-extended {
                background: transparent;
                box-shadow: none;
            }
        }
    }

我正在尝试根据视口大小加载样式表。为此，我必须将在不同媒体查询下生成的CSS从SCSS分离到单独的样式表，并使用jQuery或js加载它们。