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

Я в процессе создания своего первого приложения solo Rails с помощью Rails 3.1.проект RC5. Моя проблема заключается в том, что я хочу, чтобы мой сайт отображал различные файлы CSS условно. Я использую Blueprint CSS и я пытаюсь иметь звездочки/рельсы рендеринга screen.css большую часть времени print.css только при печати, а ie.css только при доступе к сайту из Internet Explorer.

к сожалению, по умолчанию

3 165
css ruby-on-rails-3.1 asset-pipeline sprockets

3 ответа:

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

что вы хотите сделать, это использовать отдельные файлы манифеста, чтобы разбить вещи. Сначала вы должны реорганизовать свой :

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/сред/производство.РБ:

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');
223

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

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

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

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

10

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

2