Використання конвеєра активів 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]-->

Нарешті, не забудьте включити ці нові файли маніфестів у ваш конфігурацію / середовища / 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 / активів / таблиць стилів та створення одного файлу маніфесту для версії IE. Потім у application.rb додайте їх до списку речей для попереднього компіляції:

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

А до своїх макетів умовно включайте ці файли маніфесту, і ви готові йти!

Це досить акуратний спосіб зробити це. Я використовую умовні класи на html або modernizr. Дивіться цю статтю, щоб добре представити, що робити. modernizr-vs-conditional-class-on-html