SASS @import取決於屏幕大小的多個文件

我在我的項目中有20個.scss表單。SASS @import取決於屏幕大小的多個文件

我想將它們放入「進口」工作表中，某些工作表僅根據屏幕寬度進行讀取。

我有一個非SASS項目這方面的工作有imports.css使用下列內容：

@import url('sheet-1.css'); 

@import url('sheet-2.css') screen and (min-width: 300px) and (max-width: 730px);

我在imports.scss文件嘗試這一點 - 但編譯imports.css有錯誤說：

Syntax error: Invalid CSS after \"sheet-2.css') \": expected selector or at-rule, was \"screen and (min...\"\A

這是錯誤的方法？ ..還是有解決方案？

來源

2013-12-12 Haystack

當您使用url()時，這顯然是Sass解析器中的一個錯誤。你會希望它這樣寫，而不是：

@import 'sheet-1.css'; 
@import 'sheet-2.css' screen and (min-width: 300px) and (max-width: 730px);

這應該編譯成（CSS驗證說，這是有效的）：

@import url(sheet-1.css); 
@import 'sheet-2.css' screen and (min-width: 300px) and (max-width: 730px);

我已經提交代表你的bug報告，您可以在這裏跟蹤：https://github.com/nex3/sass/issues/1042

但是，我建議您將這些文件轉換爲Sass，以便將它們編譯爲單個CSS文件。所有的瀏覽器下載所有鏈接的樣式表，即使他們目前不符合媒體查詢的限制：

@import 'sheet-1'; // filename = _sheet-1.scss 
@media screen and (min-width: 300px) and (max-width: 730px) { 
    @import 'sheet-2'; // filename = _sheet-2.scss 
}

來源

2013-12-12 17:42:01 cimmanon

我可以得到結構平直的話..青菜DIR - sheet1.scss sheet2.scss imports.scss（其包含上面更正的代碼）css dir - sheet1.css sheet2.css imports.css（由imports.scss編譯）是否正確？（抱歉格式不對） – Haystack

請修改您的問題，而不是嘗試將代碼放在評論中，這隻會讓閱讀困難。我已經修改了我的答案，以顯示使用Sass執行導入的首選方式。 – cimmanon

SASS @import取決於屏幕大小的多個文件

回答

相關問題