我们是否可以嵌套媒体查询(SASS)，这不会增加通过Gulp编译的输出的总体大小？

Question

使用Gulp:其思想是根据需要内联和嵌套媒体查询，但在编译的源代码中，它们嵌套在单个媒体查询下。关于这是否有可能的想法？

示例

.selector {
    background-color: #efefef;
    @media screen and (min-width: $break-tabletSmall) { 
        background-color: #000;
    }
}
.selector-2 {
    background-color: #ddd;
    @media screen and (min-width: $break-tabletSmall) { 
        background-color: #fff;
    }
}

当前编译成如下所示：

.selector {
    background-color: #efefef;
}
@media screen and (min-width: $break-tabletSmall) { 
    .selector {
        background-color: #000;
    }
}
.selector-2 {
    background-color: #ddd;
}
@media screen and (min-width: $break-tabletSmall) { 
    .selector-2 {
        background-color: #fff;
    }
}

所需的结果：注意，由于引用了一个单一的媒体查询，其大小稍微小一些。

.selector {
    background-color: #efefef;
}
.selector-2 {
    background-color: #ddd;
}
@media screen and (min-width: $break-tabletSmall) { 
    .selector {
        background-color: #000;
    }   
    .selector-2 {
        background-color: #fff;
    }
}

Answer 1

这个“Sass Github”杂志与这个问题有关。你有这个：

这些优化不再是计划的。Sass尽力消除额外的空白，并为值选择最小的表示形式，但是它的主要关注点是它是最好的预处理语言，而不是最好的CSS压缩器。

所以实际上你应该使用PostCSS或者postcss-组合-媒体-查询插件。或者我找到了这个gulp插件。我对CSS优化和压缩的建议是PostCSS。

但是，如果您只想通过Sass解决这个问题，您可以在上面链接的问题中使用输出缓冲作为海格雷迪。