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

Posted 2023-03-06

【中文标题】我们可以嵌套不会通过 Gulp 添加到编译输出的整体大小的媒体查询 (SASS) 吗？

【英文标题】：Can we nest media queries (SASS) that doesn't add to the overall size of the compiled output via Gulp?

【发布时间】：2021-10-25 22:46:21

【问题描述】：

使用 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;
    

【参考方案1】：

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

不再计划这些优化。 Sass 尽其所能消除多余的空格并为值选择尽可能小的表示形式，但它的主要重点是成为最好的预处理语言，而不是最好的 CSS 压缩器。

所以实际上你应该使用 PostCSS 和 postcss-combine-media-query 插件。或者我发现了这个gulp plugin。我对 CSS 优化和压缩的建议是 PostCSS。

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

【讨论】：

谢谢@Vahid。这将直接贡献！非常感谢您向我指出这些方向！