การใช้ไปป์ไลน์ทรัพย์สิน Rails 3.1 เพื่อใช้ CSS บางอย่างตามเงื่อนไข

ฉันอยู่ระหว่างการสร้างแอพ Rails เดี่ยวครั้งแรกของฉันโดยใช้ Rails 3.1.rc5 ปัญหาของฉันคือฉันต้องการให้เว็บไซต์ของฉันแสดงไฟล์ CSS ต่างๆตามเงื่อนไข ฉันใช้ Blueprint CSS และฉันพยายามให้เฟือง / รางแสดงผลscreen.cssเกือบตลอดเวลาprint.cssเฉพาะเมื่อพิมพ์และie.cssเมื่อเข้าถึงไซต์จาก Internet Explorer เท่านั้น

น่าเสียดายที่*= require_treeคำสั่งเริ่มต้นในapplication.cssรายการรวมทุกอย่างในassets/stylesheetsไดเรกทอรีและทำให้เกิดความสับสน CSS วิธีแก้ปัญหาปัจจุบันของฉันเป็นวิธีการบังคับแบบ brute-force ซึ่งฉันระบุทุกอย่างเป็นรายบุคคล:

ใน 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"

ใช้งานได้ แต่มันก็ไม่ได้สวยโดยเฉพาะ ฉันได้ค้นหาสองสามชั่วโมงเพื่อให้ได้มาไกลขนาดนี้ แต่ฉันหวังว่าจะมีวิธีที่ง่ายกว่าในการทำสิ่งที่ฉันเพิ่งพลาดไป ถ้าฉันสามารถเลือกแสดงผลไดเรกทอรีบางอย่าง (โดยไม่รวมไดเรกทอรีย่อย) มันจะทำให้กระบวนการทั้งหมดมีความเข้มงวดน้อยลง

ขอบคุณ!

ฉันได้ค้นพบวิธีที่จะทำให้ข้อพิสูจน์ที่เข้มงวดและมีอนาคตน้อยลงโดยยังคงใช้ไปป์ไลน์ของสินทรัพย์ แต่มีการจัดกลุ่มสไตล์ชีท มันไม่ง่ายกว่าโซลูชันของคุณมากนัก แต่โซลูชันนี้ช่วยให้คุณเพิ่มสไตล์ชีตใหม่โดยอัตโนมัติโดยไม่ต้องแก้ไขโครงสร้างทั้งหมดอีกครั้ง

สิ่งที่คุณต้องการทำคือใช้ไฟล์รายการแยกเพื่อแยกสิ่งต่างๆ ก่อนอื่นคุณต้องจัดระเบียบapp/assets/stylesheetsโฟลเดอร์ของคุณใหม่:

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

จากนั้นคุณแก้ไขไฟล์ manifest ทั้งสาม:

/**
 * 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 / environment / production.rb ของคุณ:

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

ปรับปรุง:

แม็กซ์ชี้ให้เห็นถ้าคุณทำตามโครงสร้างนี้คุณจะต้องคำนึงถึงการอ้างอิงภาพ คุณมีตัวเลือกน้อย:

1. ย้ายรูปภาพไปตามรูปแบบเดียวกัน
   • โปรดทราบว่าจะใช้งานได้เฉพาะในกรณีที่รูปภาพนั้นไม่ได้แชร์ทั้งหมด
   • ฉันคาดหวังว่านี่จะไม่ใช่การเริ่มต้นสำหรับส่วนใหญ่เนื่องจากมันซับซ้อนเกินไป
2. มีคุณสมบัติเส้นทางภาพ:
   • background: url('/assets/image.png');
3. ใช้ผู้ช่วย SASS:
   • background: image-url('image.png');

มาข้ามปัญหานี้วันนี้

จบลงด้วยการวางสไตล์ชีตเฉพาะ IE ทั้งหมดลงใน lib / assets / stylesheets และสร้างไฟล์ Manifest หนึ่งไฟล์ต่อหนึ่งเวอร์ชันของ IE จากนั้นใน application.rb เพิ่มเข้าไปในรายการสิ่งที่จะคอมไพล์ล่วงหน้า:

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

และในเลย์เอาต์ของคุณให้รวมไฟล์ Manifest และคุณก็พร้อมใช้งาน!

นั่นเป็นวิธีที่ค่อนข้างประณีตที่จะทำ ฉันใช้คลาสที่มีเงื่อนไขบน HTML หรือ modernizr ดูบทความนี้เพื่อเป็นตัวแทนที่ดีในสิ่งที่ทำอะไร Modernizr-VS-เงื่อนไขเรียนต่อ HTML