Koşullu olarak belirli css kullanmak için Rails 3.1 varlıkları boru hattını kullanma

Rails 3.1.rc5 kullanarak ilk solo Rails uygulamasını oluşturma sürecindeyim. Benim sorunum, sitemin çeşitli CSS dosyalarını koşullu olarak oluşturmasını istiyorum. Blueprint CSS kullanıyorum ve dişliler / rayların screen.cssçoğu zaman, print.cssyalnızca yazdırma sırasında ve ie.cssyalnızca siteye Internet Explorer'dan erişildiğinde oluşturulmasını sağlamaya çalışıyorum .

Ne yazık ki, manifest'teki varsayılan *= require_treekomut dizindeki application.cssher şeyi içerir assets/stylesheetsve hoş olmayan bir CSS karmakarışıklığına neden olur. Geçerli geçici çözüm, her şeyi ayrı ayrı belirlediğim bir tür kaba kuvvet yöntemidir:

Application.css dosyasında:

*= require_self
*= require home.css
...
*= require blueprint/screen.css

Stil sayfalarımda kısmi (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"

Bu işe yarıyor ama özellikle hoş değil. Bunu daha da ileri götürmek için birkaç saat aradım ama bunu yapmanın daha kolay bir yolu olduğunu umuyorum. Belirli dizinleri (alt dizinleri içermeden) seçmeli olarak bile oluşturabilseydim, tüm süreci çok daha az katı hale getirirdi.

Teşekkürler!

Varlık boru hattını hala kullanarak ancak stil sayfalarını gruplandırarak daha az katı ve geleceğe dönük kanıt yapmanın bir yolunu keşfettim. Çözümünüzden çok daha basit değil, ancak bu çözüm, tüm yapıyı yeniden düzenlemek zorunda kalmadan otomatik olarak yeni stil sayfaları eklemenizi sağlar.

Yapmak istediğiniz şey, şeyleri parçalamak için ayrı manifest dosyaları kullanmaktır. Öncelikle app/assets/stylesheetsklasörünüzü yeniden düzenlemelisiniz :

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

Sonra üç manifest dosyasını düzenlersiniz:

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

Ardından, uygulama düzeni dosyanızı güncellersiniz:

<%= 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]-->

Son olarak, bu yeni manifest dosyalarını config / environment / production.rb dosyasına eklemeyi unutmayın:

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

Güncelleme:

Max'in işaret ettiği gibi, bu yapıyı takip ederseniz görüntü referanslarına dikkat etmelisiniz. Birkaç seçeneğiniz var:

1. Aynı kalıbı takip etmek için görüntüleri hareket ettirin
   • Bunun yalnızca resimlerin tümü paylaşılmadığında işe yaradığını unutmayın
   • Ben çok şey karmaşık çünkü bu çoğu için bir marş olmayan bekliyoruz
2. Görüntü yolunu nitelendirin:
   • background: url('/assets/image.png');
3. SASS yardımcısını kullanın:
   • background: image-url('image.png');

Bugün bu sorunla karşılaştı.

IE'ye özgü tüm stil sayfalarını lib / varlıklar / stil sayfalarına koymak ve IE sürümü başına bir bildirim dosyası oluşturmak sona erdi. Sonra application.rb dosyasında bunları önceden derleyecekler listesine ekleyin:

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

Ve mizanpajlarınıza, şartlı olarak bu manifest dosyalarını dahil edin ve hazırsınız!

Bunu yapmanın oldukça düzgün bir yolu. Html veya modernizr üzerinde koşullu sınıflar kullanıyorum. Neyin ne işe yaradığının iyi bir temsili için bu makaleye bakın. modernizr-vs-koşullu sınıflar-on-html