在我的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
这是有区别的,但用户不会意识到这一点并不存在差异.