SASS嵌套結構打亂了@media查詢優先

Question

參見以下fiddle：

HTML：

<div class='header'>Header</div> 
<div class='main'> 
    <div class='row'> 
     <div class='cell lg-4'> 
      content 
     </div> 
     <div class='cell lg-4'> 
      content 
     </div> 
     <div class='cell lg-4'> 
      content 
     </div> 
    </div> 
</div> 

SASS：

.header { 
    display: none; 
} 

.main { 
    .row { 
     width: 100%; 

     .cell { 
      width: 100%; 
      background-color: red; 
      margin-bottom: 10px; 
     } 
    } 
} 

@media (min-width: 600px) { 
    .header { 
     display: block; 
    } 

    .cell { 
     margin-bottom: 0; 
     margin-left: 1px; 
     float: left; 
     &.lg-4 { 
      width: 33% 
     } 
    } 
} 

通過查看這些代碼，你會覺得它執行以下操作：

• 顯示默認的移動設計：即細胞被豎直地堆疊並採取所有屏幕空間和插頭被隱藏
• 以上600px的：成爲3個單元的行佔用1/3的水平空間中的每個，並顯示的標題。

如果你嘗試在小提琴，你會看到，在兩個視口（上方和下方600像素），顯示細胞垂直然而頭堆放在媒體查詢中指定並得到隱藏或顯示。

搜索了一段時間後，我意識到查詢生效的細胞只有在媒體查詢採用確切相同的嵌套結構爲正常SASS代碼，即：

@media (min-width: 600px) { 
    .header { 
     display: block; 
    } 

    .main { 
     .row {   
      .cell { 
       margin-bottom: 0; 
       margin-left: 1px; 
       float: left; 
       &.lg-4 { 
        width: 33% 
       } 
      } 
     } 
    } 
} 

爲什麼這發生，更重要的是，如何避免在媒體查詢中重複使用相同的結構？ （這個小提琴的解決方法很簡單，但我的實際代碼有超過10到20個嵌套變量，因此爲第20個元素添加媒體查詢會迫使我添加19個無用的嵌套變量行，快速重載代碼並使其變得困難閱讀）

也許我這樣做是錯誤的，因爲我對創建自己的響應式設計頗爲陌生，所以我錯過了一些避免這種情況的最佳實踐？

Answer 1

這是因爲.main .row .cell在@media查詢中比.cell更具體。

儘量減少嵌套以避免發生這種確切的情況是一種很好的做法，因爲這是一種痛苦的解決方法。大量嵌套產生的其他一些問題是，它使得樣式非模塊化且難以重用，因爲它們依賴於確切的結構，它也可能對性能不利。

我建議拆分頂部是這樣的：

Demo

.header { 
    display: none; 
} 

.main { 
    /* ... */ 
} 

.row { 
    width: 100%; 
} 

.cell { 
    width: 100%; 
    background-color: red; 
    margin-bottom: 10px; 
} 

@media (min-width: 600px) { 
    .header { 
     display: block; 
    } 

    .cell { 
     margin-bottom: 0; 
     margin-left: 1px; 
     float: left; 
     &.lg-4 { 
      width: 33% 
     } 
    } 
}