加載Sass媒體查詢的部分順序

我正在基於Bootstrap和Sass的網站上工作，我在「main.scss」文件的開頭部分導入partials，但對於媒體查詢，這意味着我必須重新編寫代碼以用於媒體以來的某些斷點首先加載查詢，然後加載其餘的頁面樣式。對於例如爲：

// _media_queries.scss (loaded first) 

@media(max-width:767px) { 
    .vertical_switch{ 
     width:100%; 
     padding: 0; 
    } 
} 

// main.scss (loaded second - overrides mobile breakpoint) 
.vertical_switch{ 
    width: 50%; 
    padding: 20px 0; 
}

我SCSS進口：

// Imports 

@import '_mixins'; 
@import '_preloader'; 
@import '_media_queries'; 

// Rest of the page styles

它是在最後加載媒體查詢是一個好主意/最佳做法？在一個單一的Sass文件中，我會這樣做，但我想知道如何解決這個處理partials的問題。

來源

2017-08-09 Mauritius D' Silva

我通常基於組件設置我的'偏好'。我不需要使用媒體查詢的單獨文件，只需將它們保留在同一個組件中即可。比方說，我有一個導航組件，我頂嘴看起來是這樣的：

.nav { 
    width:100%; 
    padding: 0; 
    @media(min-width:767px) { 
     width: 50%; 
     padding: 20px 0; 
    } 
}

我相信這可以讓更多的可讀性和易於維護/縮放

來源

2017-08-09 07:41:01 Maarten

我之前已經試過這一點，增加了批量該文件由於重複的斷點重新分配樣式。但是，在一個文件中，所有樣式都位於一個@media {}塊中。 –

是的，這是一個偏好問題。我嘗試了兩種，並堅持以上。你是什麼意思，「由於重複的斷點重新分配樣式，文件大量增加」？不知道你在這裏想說什麼。 – Maarten

例如：如果對於每次更改@media {}將被寫入的移動斷點發生50個css更改，則會在該文件中添加50個其他@media塊。 –

加載Sass媒體查詢的部分順序

回答

相關問題