Kullanma 3.1 varlıklar boru hattı koşullu olarak bazı css kullanmak için Raylar

SORU

20 AĞUSTOS 2011, CUMARTESİ

Kullanma 3.1 varlıklar boru hattı koşullu olarak bazı css kullanmak için Raylar

İlk solo Raylar uygulamam Rails 3.1 kullanılarak inşa sürecinde ediyorum.rc5. Benim sorunum sitemde çeşitli CSS dosyaları koşullu olarak işlemek istiyorum. Ben kullanıyorum Blueprint CSS ve çalıştığım için dişliler/raylar işlemek screen.css çoğu zaman, print.css sadece baskı ve ie.css sadece siteye erişilen Internet Explorer.

Ne yazık ki, application.css *= require_tree komut listesi varsayılan tatsız bir CSS karmakarışık assets/stylesheets dizin ve sonuçları her şeyi içerir. Benim geçerli çözüm ben her şeyi tek tek belirttiğiniz kaba kuvvet yöntemi bir tür

Uygulamada.css:

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

Benim stil 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 özellikle güzel değil ama çalışır. Buraya kadar gelmek için bile arama birkaç saat yaptım ama sadece ben kaçırmıştım bunu yapmanın kolay bir yolu var umuyorum. Eğer seçici olarak belirli bir dizin (alt dizinleri dahil olmadan) işlemek olsaydım bile, tüm süreç çok daha az sert yapar.

Teşekkürler!

CEVAP

1 EYLÜL 2011, PERŞEMBE

Daha az sert ve geleceğe yönelik hala varlık boru hattı kullanıyorum ama stil gruplandırılmış alarak yapmak için bir yol buldum. Çözüm çok daha basit değil, ama bu çözüm otomatik olarak yeniden düzenleyin bütün yapısını yeniden zorunda kalmadan yeni stil eklemek için izin verir.

Ne yapmak istediğinizi ayrı bildirim dosyaları toplantıyı bitirmek için kullanın. İlk yeniden düzenlemek için app/assets/stylesheets klasörü:

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

Size üç bildirim dosyalarını düzenlemek:

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

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

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

Bir sonraki uygulama düzeni dosyası güncelleme:

<%= 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 bildirim dosyaları eklemeyi unutmayın sizin config/üretim ortamları/.rb:

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

Güncelleme:

Max belirttiği gibi, eğer bu yapı izlerseniz görüntü başvurular dikkatli olmak zorunda. Birkaç seçeneğiniz var:

Görüntüleri aynı düzende hareket
- Bu sadece görüntüleri paylaşılıyor, hepsi değilse de çalıştığını unutmayın
- Bu işler çok karışıyor beri sigara başlangıç için en olacak bekliyorum
Görüntü yolu hak:
- background: url('/assets/image.png');
Kullanım SASS Yardımcısı:
- background: image-url('image.png');