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

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 - combination -media-query插件。或者我找到了这个gulp插件。我推荐的CSS优化和压缩是PostCSS。

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