使用sass進行內聯媒體查詢的單獨文件？

我想知道是否有可能使用SASS爲每個媒體查詢（手機，平板電腦，桌面等）有一個單獨的文件，然後使用內嵌媒體查詢有sass編譯該類的內聯媒體查詢到該特定文件？使用sass進行內聯媒體查詢的單獨文件？

例如：

說我有一個sass部分_article.scss。

.test-class { 
     color: #000000; 
     background: red; 
     width: 980px; 

    @media only screen and (max-width : 300px) { 
     width: 100px; 
     height: 100px; 
    } 
}

這部分是在base.scss中導入的。

@import "partials/article";

現在我想的是，與其查詢在base.css文件被編譯每一個媒體，我想與手機，平板電腦等每一個具體的媒體查詢被編譯到它自己的文件（mobile.css ，平板電腦，CSS等）。

換句話說，我希望內聯媒體查詢的好處，同時仍然爲每個設備都有一個非常模塊化的文件結構。當我提供文件時，我只需要服務器2個小文件（base.css和mobile.css）。

這可能嗎？我目前剛剛創建了一個mobile.scss文件，然後手動覆蓋了項目中與我一樣大的項目樣式，這將導致稍後的問題。

有沒有更好的選擇？

感謝

來源

2014-10-06 Deep

你意識到從文檔鏈接的每個CSS文件都會被每個客戶端下載，即使它們不符合媒體條件，對吧？這樣做沒有性能優勢。 – cimmanon 2014-10-06 02:26:25

是的，我意識到這一點。我想這樣做的原因是因爲它更容易理解（邏輯上），尤其是因爲其他客戶將在他們自己的公司網站上使用這些文件。此外，如果我們想要它可能只提供所需的文件使用JavaScript和後備。 – Deep 2014-10-06 02:35:37

@cimmanon其實有。通過谷歌的PageSpeed Insights文檔，由media =「prientation：portrait」（或其他標籤爲「print」等）包含和定義的css被視爲「非阻塞」，因此它不會阻止呈現LAYOUT ，在它被繪之前。因此這是一個性能提升。通常，當你深入到網頁的表現並希望SEO喜歡你時，你會做更多的事情 - 甚至更多。 – MiKE 2016-07-01 19:34:26

-4

您可以用jQuery做到這一點：

function adjustStyle(width) { 
    width = parseInt(width); 
    if (width < 777) { 
     $(".body").attr("href", "css/small.css"); 
    } else if ((width >= 778) && (width < 980)) { 
     $(".body").attr("href", "css/medium.css"); 
    } else { 
     $(".body").attr("href", "css/big.css"); 
    } 
} 

$(function() { 
    adjustStyle($(this).width()); 
    $(window).resize(function() { 
     adjustStyle($(this).width()); 
    }); 
});

和更好的方式是，包括設備的列表，然後包括你的CSS表，這樣你不會有雙重下載，這意味着只有在設備匹配時纔會下載。爲此，您可以使用Detect Mobile Browsers中的任何語言，然後根據自己的喜好進行調整。

來源

2014-10-06 02:53:18 Devin

不回答問題。 OP希望採用單個Sass文件，並讓它生成多個CSS文件，並通過媒體查詢分解出來。 – cimmanon 2014-10-06 03:01:36

是的，你是對的，有時候我會混淆可用性和什麼與誰知道什麼的形式，規則和協議有關。對不起這是我的錯。 – Devin 2014-10-06 03:14:53

使用sass進行內聯媒體查詢的單獨文件？

回答

相關問題