Uso de la canalización de activos de Rails 3.1 para usar condicionalmente ciertos css

Estoy en el proceso de construir mi primera aplicación Rails solo usando Rails 3.1.rc5. Mi problema es que quiero que mi sitio procese los diversos archivos CSS condicionalmente. Estoy usando Blueprint CSS e intento que las ruedas dentadas / rieles se procesen la screen.cssmayor parte del tiempo, print.csssolo durante la impresión y ie.csssolo cuando se accede al sitio desde Internet Explorer.

Desafortunadamente, el *= require_treecomando predeterminado en el application.cssmanifiesto incluye todo en el assets/stylesheetsdirectorio y da como resultado una mezcla CSS desagradable. Mi solución actual es una especie de método de fuerza bruta donde especifico todo individualmente:

En application.css:

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

En mis hojas de estilo parciales (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"

Esto funciona pero no es especialmente bonito. He hecho algunas horas de búsqueda para llegar tan lejos, pero espero que haya una manera más fácil de hacerlo que acabo de perder. Si incluso pudiera renderizar selectivamente ciertos directorios (sin incluir subdirectorios), todo el proceso sería mucho menos rígido.

¡Gracias!

He descubierto una manera de hacerlo menos rígido y a prueba de futuro al seguir usando la canalización de activos pero agrupando las hojas de estilo. No es mucho más simple que su solución, pero esta solución le permite agregar automáticamente nuevas hojas de estilo sin tener que volver a editar toda la estructura nuevamente.

Lo que desea hacer es usar archivos de manifiesto separados para dividir las cosas. Primero debes reorganizar tu app/assets/stylesheetscarpeta:

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

Luego edita los tres archivos de manifiesto:

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

A continuación, actualice el archivo de diseño de su aplicación:

<%= 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]-->

Por último, no olvide incluir estos nuevos archivos de manifiesto en su configuración / entornos / production.rb:

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

Actualizar:

Como señaló Max, si sigue esta estructura, debe tener en cuenta las referencias de imágenes. Tienes algunas opciones:

1. Mueve las imágenes para seguir el mismo patrón
   • Tenga en cuenta que esto solo funciona si no se comparten todas las imágenes
   • Espero que esto no sea un comienzo para la mayoría, ya que complica demasiado las cosas.
2. Califique la ruta de la imagen:
   • background: url('/assets/image.png');
3. Use el ayudante SASS:
   • background: image-url('image.png');

Encontré este problema hoy.

Terminé poniendo todas las hojas de estilo específicas de IE en lib / assets / stylesheets y creando un archivo de manifiesto por versión de IE. Luego, en application.rb, agréguelos a la lista de cosas para precompilar:

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

¡Y en sus diseños, incluya condicionalmente esos archivos de manifiesto y listo!

Esa es una forma bastante ordenada de hacerlo. Yo uso clases condicionales en html o modernizr. Vea este artículo para una buena representación sobre qué hace qué. modernizr-vs-conditional-classes-on-html