Использование конвейера активов Rails 3.1 для условного использования определенного css

Im в процессе создания моего первого приложения Rails для Rails с использованием Rails 3.1.rc5. Моя проблема заключается в том, что я хочу, чтобы мой сайт визуализировал различные файлы CSS условно. Я использую Blueprint CSS и Im, пытаясь, чтобы звездочки/рельсы отображали 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

В моих стилях partial (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"

Это работает, но не особенно красиво. Ive сделал несколько часов поиска, чтобы даже получить это далеко, но Im надеясь, что theres более легкий способ сделать это, что Ive просто пропустил. Если бы я мог выборочно отображать определенные каталоги (без включения подкаталогов), это сделало бы весь процесс намного менее жестким.

Спасибо!

Ответы

Ответ 1

Я обнаружил способ сделать это менее жестким и будущим доказательством, все еще используя конвейер активов, но имея таблицы стилей, сгруппированные. Это не намного проще, чем ваше решение, но это решение позволяет вам автоматически добавлять новые таблицы стилей без повторной настройки всей структуры.

То, что вы хотите сделать, это использовать отдельные файлы манифеста, чтобы разбить их. Сначала вам нужно переустановить папку 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 )

Update:

Как указал Макс, если следовать этой структуре, вы должны помнить о ссылках на изображения. У вас есть несколько вариантов:

  • Переместите изображения, следуя одному шаблону
    • Обратите внимание, что это работает только в том случае, если изображения не являются общедоступными
    • Я ожидаю, что это будет не стартером для большинства, поскольку это слишком усложняет ситуацию.
  • Квалифицировать путь изображения:
    • background: url('/assets/image.png');
  • Использовать помощник SASS:
    • background: image-url('image.png');

Ответ 2

Сегодня столкнулся с этой проблемой.

Завершение размещения всех таблиц стилей IE в lib/assets/stylesheets и создание одного файла манифеста для каждой версии IE. Затем в application.rb добавьте их в список вещей, чтобы прекомпилировать:

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

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

Ответ 3

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