Bagaimanakah Saya Boleh Melaksanakan Kemasukan CSS Bersyarat dalam Rails 3.1 Menggunakan Sprockets?

Kemasukan Aset Bersyarat dalam Rails 3.1 dengan Sprockets

Dalam usaha mengoptimumkan pemaparan CSS, ramai pembangun bergelut dengan cabaran untuk menyelektifkan CSS fail berdasarkan syarat tertentu. Isu ini menjadi penting apabila berurusan dengan reka letak responsif atau memastikan keserasian merentas penyemak imbas.

Dalam Rails 3.1, saluran paip aset menyediakan mekanisme yang berkuasa untuk mengurus aset statik. Secara lalai, arahan *= require_tree dalam application.css merangkumi semua fail dalam direktori aset/stylesheets. Walau bagaimanapun, pendekatan ini mungkin tidak mencukupi untuk memasukkan fail CSS secara bersyarat.

Penyelesaian Tradisional tetapi Kikuk

Satu penyelesaian adalah dengan menentukan secara manual setiap fail CSS, seperti yang digambarkan:

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

Walaupun kaedah ini berfungsi, kaedah ini menjadi kurang praktikal kerana bilangan fail CSS meningkat.

Memanfaatkan Manifes Berasingan dan Folder Tersusun

Penyelesaian yang lebih elegan melibatkan penyusunan semula folder aset/stylesheet dan menggunakan fail manifes yang berasingan:

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

Setiap kategori mendapat fail manifesnya sendiri:

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

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

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

Aplikasi fail susun atur dikemas kini dengan sewajarnya:

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

Ingat untuk memasukkan fail manifes dalam config/environments/production.rb:

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

Rujukan Imej

Dengan struktur ini, berhati-hati diperlukan apabila berurusan dengan rujukan imej. Satu penyelesaian yang berpotensi adalah untuk memindahkan imej dengan sewajarnya, memastikan organisasi yang konsisten dengan fail CSS. Sebagai alternatif, seseorang boleh memilih untuk melayakkan laluan imej atau memanfaatkan pembantu SASS untuk URL imej.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Kemasukan CSS Bersyarat dalam Rails 3.1 Menggunakan Sprockets?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!