如何配置SASS將特定樣式表編譯爲單獨的桌面版和移動版

Question

我與Sass一起運行Rails 3.1。我現在需要將我的樣式表分割成移動版本和桌面版本。默認情況下，sass-rails將assets/stylesheets/path中的每個.scss文件壓縮到一個application.css文件中。

我想，而是明確地告訴薩斯到編譯SCSS文件X到mobile.css和文件ÿ&ž到desktop.css

這是通過config.sass價值實現的呢？我真的很感謝這次的幫助。

Answer 1

通常你<％= stylesheet_link_tag：申請％>

而且application.scss樣子：

*= require_self 
*= require_tree 

相反的鏈輪的清單爲需要的文件，使用SASS的包括。仍然使用application.scss，刪除行*= require_tree

所以<％= stylesheet_link_tag：移動％>

/app/assets/stylesheets/mobile.scss

@import "bootstrap/bootstrap.scss"; 
@import "typography.scss"; 
body { 
    padding-top: 60px; 
} 

你會怎麼做desktop.scss也是一樣。注意：您必須手動添加要導入的每個文件。

Answer 2

使用響應設計而不是服務器端檢查！更漸進/更好的方法。另外，你的http請求會感謝你！

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

，或者編寫檢查用戶代理（我假設你已經做了），並實現條件」你的風格的裝載