SASS媒體查詢佔位符？

我發現這個方法可以輕鬆地添加@media塊使用的mixin：SASS媒體查詢佔位符？

@mixin phone() { 
    @media only screen and (max-width: 480px) { 
     @content; 
    } 
}

要使用它，只需簡單地輸入這樣的事情：

p { 
    @include phone { ... } 
    span { 
     @include phone { ... } 
    } 
}

但問題在於真正CSS輸出：

@media only screen and (max-width: 480px) { 
    p { ... } 
} 
@media only screen and (max-width: 480px) { 
    p span { ... } 
}

它複製的@media ...部分會膨脹的CSS。

有沒有辦法讓mixin像佔位符一樣行事？所以它將結合所有@content並將其置於相同的@media ...區塊下。

那麼結果就會像

@media only screen and (max-width: 480px) { 
    p { ... } 
    p span { ... } 
}

我知道我可以只是把@include phone在文件的結尾，寫在該塊中的所有必要的風格。

但是，除了原始媒體查詢風格之外，還可以編寫媒體查詢風格，這樣可以更輕鬆地閱讀和組織。

謝謝

來源

2013-07-12 hrsetyono

Sass目前沒有該功能。您唯一的選擇是在單個媒體查詢中手動分組樣式（或使用具有該功能的第三方CSS壓縮器）。

https://github.com/nex3/sass/issues/116

來源

2013-07-12 16:39:24 cimmanon

很高興認識sass仍然不能支持這個。我一直在嘗試很多，並失敗 – hrsetyono

你只需要調整您的嵌套。由於mixin會將所有內容放置在媒體查詢中，因此只需使用mixin一次，並將所有相關樣式放在其中（以避免多個媒體查詢）。

@include phone { 
    p { 
    span { ... } 
    } 
}

如果你想樣式<p>和<跨度>各種媒體查詢組合，你將不可避免地結束了的風格的一些分離，無論是在你的預處理或輸出代碼。

例如：

p { 
    ... 
    span { ... } 
    @include phone { 
    ... 
    span { ... } 
    } 
}

希望有所幫助。即使你最終輸出的效率不高，它也不會實際上減慢瀏覽器的渲染速度，所以我會優先考慮編寫可維護開發的代碼。

來源

2013-07-12 19:48:13 jwfrench

謝謝！我會確定優先維護的代碼。 – hrsetyono

SASS無法與媒體查詢**結合使用，所以當您採用此代碼風格時，重複媒體查詢當前是不可避免的。

您可以在頂層（即通過媒體查詢的組代碼）對媒體查詢構造代碼，但這通常是一個糟糕的主意。 Eric Meyer是這裏的CSS專家之一，says（和許多其他前端愛好者會同意），你永遠不應該那樣做。我已經在一個項目上自己嘗試了這種方法，並且我確認了項目越大，這個代碼結構就顯得更加痛苦。SMACSS和其他代碼結構方法也提出反對意見。

這個代碼結構被廣泛使用的地方在於CMS基礎主題（主題模板又稱入門工具包）。但它們旨在讓用戶快速覆蓋默認樣式，而不是從頭開始構建。

事情就是那個duplicate media queries don't really matter。儘管@cimmanon可能不同意我的觀點，但只有源代碼（SASS）的可讀性和可維護性應該很重要，因爲每個現代Web服務器都爲只能由機器讀取的CSS代碼提供壓縮（gzip）。

當然，破壞CSS的方式有很多，通過使其變得難以置信的巨大。使用非語義CSS框架就是其中之一。明智地應用大量本地媒體查詢塊不是。

來源

2013-07-12 20:16:08

嗨，非常感謝。那麼我會繼續這種做法。我喜歡Eric Meyer如何同意「媒體查詢應該儘可能接近」 – hrsetyono

如果您想發表意見，請使用評論。看到某人複製/粘貼來自其他正確答案之一併貼上您的意見，然後獲得接受，這是相當糟糕的。 – cimmanon

對不起，@cimmanon先生，我並不是故意冒犯你。事實上，我既沒有複製一行，也沒有在我的回答中貼上一行，也沒有引用出版關於這個主題的書籍的專家來表達意見。此外，你已經接受了你的答案，所以我不明白你爲什麼抱怨。 –

SASS媒體查詢佔位符？

回答

相關問題