我们可以嵌套媒体查询 (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

这个issue in Sass Github与这个问题有关。你有这个：

These optimizations are no longer planned. Sass does what it can to eliminate extra whitespace and choose the smallest possible representation for values, but it's primary focus is being the best preprocessing language it can be rather than the best CSS compressor.

所以实际上你应该使用 PostCSS，也许 postcss-combine-media-query plugin. Or I found this gulp plugin。我对 CSS 优化和压缩的建议是 PostCSS.

但是如果你只想用 Sass 解决这个问题，你可以在上面链接的问题中使用输出缓冲作为 said by heygrady。

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

Can we nest media queries (SASS) that doesn't add to the overall size of the compiled output via Gulp?

css

sass

media-queries

gulp