在SCSS/SASS中嵌套的CSS3媒體查詢

我正在致力於基於Bootstrap的響應式網站。我使用SCSS/SASS和Compass來優化CSS工作流程。在我SASS的代碼，我有以下幾點：在SCSS/SASS中嵌套的CSS3媒體查詢

$sm-screens-and-wider: "screen and (min-width: 768px)"; 
$lg-screens: "screen and (min-width: 1200px)"; 

@media #{$sm-screens-and-wider} { 
    .search-copyright-tab .copyright { 
     font-size: 19px; 
     @media #{$lg-screens} { 
     font-size: 21px; 
     } 
    } 
}

這導致到下面的CSS：

@media screen and (min-width: 768px) { 
    .search-copyright-tab .copyright { 
    font-size: 19px; 
    } 
} 

@media screen and (min-width: 768px) and (min-width: 1310px) { 
    .search-copyright-tab .copyright { 
    font-size: 21px; 
    } 
}

注意在第二個媒體查詢重複min-width。這是有效的CSS代碼，在現代瀏覽器中工作得很好。但是respond.js解析它失敗，因爲它是正則表達式抓取第一個值，IE8以錯誤的方式呈現內容。

我搜索了很多，並沒有發現任何提及這樣的問題。我發現甚至失敗的原因與responds.js：

minw : thisq.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/) && parseFloat(RegExp.$1) + (RegExp.$2 || ""),

這個表達式僅在媒體查詢語句（thisq）認爲首先發現min-width。因此，目前我有幾種可能的解決方案（按嚴重性排列）：
1.儘管制動移動優先的概念，對於這種情況使用最大寬度媒體查詢;
2.更改我的SCSS/SASS文件結構，並通過分離相同的類樣式使其不易讀取;
3.分叉並修改respond.js庫;
4.後處理SASS的輸出並重寫破損的條目。

說實話，我對這些解決方案並不滿意，而且我有一種感覺，SASS應該親自處理這些案例，這是我的奇怪的SASS用例，它強制它的行爲如此（除了使用SASS與Bootstrap，這是LESS供電）。任何人都可以在這裏指出更簡單/更好的解決方案嗎？

來源

2014-01-28 Anton Boritskiy

我想不出一個更好的辦法，你覆蓋了大部分基地 –

@Zach，我的問題是SASS以某種方式加入了'screen'語句並且不會重複它，同時保持雙'min-width'狀態，感覺像是一個錯誤或從我身邊濫用。 –

如果這是我的項目，我只是移動嵌套查詢，所以它不再嵌套，但我不會說這是一個誤用 –

合併相同的項目（screen）而不是min-width是合理的，因爲它們是不同的。我發現SASS實際上很少理解什麼CSS規則在設計上是有效的，以便面向未來。

我不喜歡使用具有多個查詢的合併查詢，不僅因爲您遇到的問題，而且因爲它是寶貴的浪費的字節，仍然必須通過網絡。

我會用@include定義@media查詢，它比你正在使用的字符串方法更好一點，像這樣做，這是我的感覺是一樣的解決方案，而這些問題的可讀性：

// The mixins can be defined in some shared file 
@mixin media-gte-sm { 
    @media screen and (min-width: 768px) { 
    @content; 
    } 
} 
@mixin media-gte-lg { 
    @media screen and (min-width: 1200px) { 
    @content; 
    } 
} 

.search-copyright-tab .copyright { 
    @include media-gte-sm { 
    font-size: 19px; 
    } 
    @include media-gte-lg { 
    font-size: 21px; 
    } 
}

來源

2014-01-28 18:10:02

您的解決方案是好的，謝謝你，我意識到我的問題的例子不清楚地表示我的問題，並且解決方案不能按原樣應用。我改變了我的SASS結構，現在我使用了smth。非常接近你的答案。謝謝。 –

在SCSS/SASS中嵌套的CSS3媒體查詢

回答

相關問題