我正在使用Rails 3.1.rc5構建我的第一個單獨的Rails應用程序。我的問題是我想讓我的網站有條件地呈現各種CSS文件。我正在使用Blueprint CSS，并且試圖在screen.css大多數情況下渲染鏈輪/軌道，print.css僅在打印ie.css時以及從Internet Explorer訪問該網站時。不幸的是，清單中的默認*= require_tree命令application.css包括assets/stylesheets目錄中的所有內容，并導致令人不愉快的CSS混亂。我當前的解決方法是一種蠻力方法，其中我分別指定了所有內容：在application.css中：*= require_self*= require home.css...*= require blueprint/screen.css在我的樣式表中，部分（haml）：<!--[if lt IE 9]<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>![endif]-->= stylesheet_link_tag "application"= stylesheet_link_tag 'blueprint/print', media: 'print'<!--[if lt IE8]]= stylesheet_link_tag 'blueprint/ie'![endif]-->= javascript_include_tag "application"這有效，但不是特別漂亮。我已經花了幾個小時進行搜索，甚至可以做到這一點，但我希望有一種更簡單的方法可以實現，而我只是錯過了。如果我什至可以選擇性地呈現某些目錄（不包括子目錄），那么整個過程將變得不那么嚴格。謝謝！
3 回答
慕少森
+-- print
TA貢獻2019條經驗 獲得超9個贊
我發現了一種方法，可以通過仍然使用資產管道但將樣式表進行分組來降低其僵化度和面向未來。它并沒有比您的解決方案簡單得多，但是此解決方案使您可以自動添加新的樣式表，而不必再次重新編輯整個結構。
您要做的是使用單獨的清單文件來分解內容。首先，您必須重新組織您的app/assets/stylesheets文件夾：
app/assets/stylesheets
+-- all
+-- your_base_stylesheet.css
+-- blueprint
+-- print.css
+-- your_print_stylesheet.css
+-- ie
+-- blueprint
+ ie.css
+-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css
然后，編輯三個清單文件：
/**
* application-all.css
*
*= require_self
*= require_tree ./all
*/
/**
* application-print.css
*
*= require_self
*= require_tree ./print
*/
/**
* application-ie.css
*
*= require_self
*= require_tree ./ie
*/
接下來，您將更新應用程序布局文件：
<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>
<!--[if lte IE 8]>
<%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->
最后，不要忘了在您的config / environments / production.rb中包含這些新的清單文件：
config.assets.precompile += %w( application-all.css application-print.css application-ie.css )
更新：
正如Max所指出的那樣，如果您遵循這種結構，則必須注意圖像參考。您有幾種選擇：
移動圖像以遵循相同的模式
請注意，這僅在圖像未全部共享時有效
我希望這對于大多數人來說都是一個入門者，因為它會使事情變得過于復雜
限定圖像路徑：
background: url('/assets/image.png');
使用SASS助手：
background: image-url('image.png');
翻翻過去那場雪
TA貢獻2065條經驗 獲得超14個贊
那是一種非常整潔的方法。我在html或modernizr上使用條件類。請參閱本文，以了解如何執行操作。 HTML上的modernizr-vs-conditional-classes
- 3 回答
- 0 關注
- 462 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消