使用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条答案
按热度按时间niwlg2el1#
这个issue in Sass Github与这个问题相关。您会看到:
这些优化不再是计划中的。Sass尽其所能消除多余的空格,并为值选择尽可能小的表示,但它的主要焦点是成为最好的预处理语言,而不是最好的CSS压缩器。
所以实际上你应该使用PostCSS和postcss-combine-media-query插件。或者我找到了这个gulp plugin。我推荐的CSS优化和压缩是PostCSS。
但是如果您只想用Sass来解决这个问题,您可以使用heygrady在上面链接的问题中所说的输出缓冲。