SCSS：按媒体查询分组输出

Posted 2023-03-06

【中文标题】SCSS：按媒体查询分组输出

【英文标题】：SCSS: Group output by media queries

【发布时间】：2013-04-28 09:23:29

【问题描述】：

在我的 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";

以这种方式使用部分代码可以更轻松地在项目之间重用代码。例如，如果我有一个不需要幻灯片的项目，我可以省略 _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;
    

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

【问题讨论】：

这是一个非常常见的 SASS/SCSS 功能请求。这里正在讨论：github.com/nex3/sass/issues/116

您使用媒体查询来调整元素的大小（无论是字体大小还是边距或填充）这一事实表明您的设计效率低下。如果您所有需要调整的元素的大小都以 em 而不是 px 为单位，那么您只需要修改 body 元素的 font-size。

字体大小只是一个例子。感谢您的帮助！

当提供的示例不完整时，您希望如何获得一个好的解决方案？可能有 一种模式可以满足您的需求。

@cimmanon，如果它让您放心，请假装 OP 没有更改 font-size 而是 width 或 color 或其他一些属性。改变什么并不重要。问题还是一样：是对媒体查询进行分组还是对部分查询进行分组。

【参考方案1】：

也许在future versions。

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

存在差异，但用户不会真正意识到差异。