SCSS：按媒体查询分组输出

在我的SCSS中,我对不同类型的样式使用不同的部分.

例如.

_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";

以这种方式使用partial可以更容易地在项目之间重用代码.例如,如果我有一个不需要幻灯片放映的项目,我可以省略_slideshow.scss.

这种方法的缺点是媒体查询位(例如@media only screen and)在最终的CSS中重复多次,这很快就会导致代码膨胀.

无论如何我可以按原样保留我的部分,但是告诉scss将它们组合在输出中,所以所有min-width：768px在一个查询中组合在一起,所有min-width：992px在一个查询中.

例如.所以输出如下：

.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;
    }

}

我知道我可以为每个查询创建一个单独的部分,然后将它们导入另一个工作表并将它们包装在查询中,但随后开始变得很复杂.

解决方法

也许在 future versions.

但是将它们组合或分开之间并没有太大的区别.你可以在这个网站上进行测试：http://aaronjensen.github.io/media_query_test

这是有区别的,但用户不会意识到这一点并不存在差异.