html - Sass 媒体查询编译的 css

Question

我已经开始使用 Sass 并使用我的旧 css 代码并使用它。对于编译，我使用了 prepros，它可以选择压缩 CSS，从而节省一些空间。

我遇到的问题是，当 SCSS 代码最后编译成 1 行时，媒体查询为空

这是我的 SCSS 的样子，例如

@media all and (max-width: 900px) {
  body {
    background-color: red; }
}

这就是编译的内容

body{background-color:blue;}@media all and (max-width: 900px){}

我不是 100% 确定空格，但你明白我认为的重点，它在 1 行代码中。将事物放入新行时，它也会在崇高的文本中正确突出显示。

有没有办法仍然压缩我的 css 但让媒体查询工作？

编辑：我检查了，输出看起来完全像这样

@media all and (max-width: 900px){}

所以这不是“和”后面缺少空格的错误

Edit2：仍然无法正常工作，这是我的崇高文本中的确切代码，在浏览器中不起作用。

.overlay{-webkit-filter:blur(0);opacity:1;transition:all 0.5s ease-in-out}@media all and (max-width: 900px){}

我的代码去哪儿了？为什么压缩的 CSS 缺少媒体查询的内容

score 1 · Accepted Answer

几天前我也遇到了这个问题，我认为在 prepros 更新之前不是这种情况，但我还没有找到让它工作的方法，除非我将媒体查询放在选择器内而不是外面。

所以如果你真的这样做：

body{
    @media all and (max-width: 900px){
        background-color: red;    
    }
}

Prepros 应该正确编译它。这是 SASS 打算让媒体查询工作的方式，但由于普通 CSS 基本上是有效的 SCSS，我认为 prepros 真的应该再次开始支持它。

score 0 · Accepted Answer

body{
background-color:red;
  @media all and (max-width:900px)
  {
    background-color:blue;
  }
 }

2 回答 2