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){}

Sublime也不認為是正確的http://i.imgur.com/9lTP3ux.png

我的守則去了哪里？ 為什么壓縮的CSS缺少媒體查詢的內容

Answer 1

我幾天前也遇到了這個問題，我認為在prepros更新之前不是這種情況，但是除非找到媒體查詢而不是將其放在選擇器內，否則我還沒有找到一種使之起作用的方法。

因此，如果您實際上這樣做：

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

Prepros應當正確編譯。 這是SASS希望媒體查詢起作用的方式，但是由於普通CSS基本上是有效的SCSS，所以我認為prepros確實應該從另一角度開始支持它。

Answer 2

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