Использование 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. Мой текущий обходной путь - это своего рода метод грубой силы, в котором я задаю все индивидуально:

В application.css:

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

В моих таблицах стилей частично (хамл):

<!--[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

Затем вы редактируете три файла манифеста:

/**
 * 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 и созданием одного файла манифеста для каждой версии IE. Затем в application.rb добавьте их в список вещей для прекомпиляции:

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

И в ваших макетах условно включите эти файлы манифеста, и все готово!

Это довольно аккуратный способ сделать это. Я использую условные классы на html или modernizr. Смотрите эту статью для хорошего представления о том, что делает что. Modernizr-против-условных классов-на-HTML