¿Cómo administrar activos de hoja de estilo CSS en Rails 3.1?

Question

Estoy aprendiendo la nueva canalización de activos en Rails 3.1. Un problema particular que estoy teniendo es la forma en que Sprockets mezcla todas las hojas de estilo CSS encontradas en una sola hoja de estilo masiva. Entiendo por qué esto es una ventaja sobre la fusión manual de hojas de estilo y la minificación para la producción. Pero quiero poder poner en cascada de manera selectiva hojas de estilo en lugar de tener todas las reglas mezcladas. Por ejemplo, yo quiero:

master.css

a ser cargado por todas las páginas de la aplicación Rails, pero quiero

admin.css sólo para ser cargado por páginas/puntos de vista dentro de la sección de administración/espacio de nombres

¿Cómo puedo aprovechar la excelente forma en que Rails 3.1 combina hojas de estilo y las minimiza para producción, pero también tiene la flexibilidad anterior de poder cargar solo ciertas combinaciones de hojas de estilo por diseño?

O debería hacerse esto mediante la adición de una clase de etiquetas de cuerpo en cuerpo layouts- clase

= "admin"

Y luego dirigirse a las reglas de estilo según el caso. Usar los selectores de ámbito SASS esta podría ser una solución razonable.

Answer 1

La forma en que lo he estado haciendo hasta ahora es tener dos carpetas separadas a/y u/donde a/es para la vista de administrador y u/es para la vista del usuario. Luego, en el diseño, señalo la application.css correspondiente con assets/u/application.css (js). Es un poco molesto tener que mover los archivos generados automáticamente cada vez, pero mucho menos que tener que requerir cada archivo individualmente en el manifiesto.

Answer 2

Éste es cómo resuelto el problema de estilo: (con perdón del Haml)

%div{:id => "#{params[:controller].parameterize} #{params[:view]}"} 
    = yield 

De esta manera puedo empezar todos la página específica .css.sass archivos con:

#post 
    /* Controller specific code here */ 
    &#index 
    /* View specific code here */ 
    &#new 
    &#edit 
    &#show 

De esta manera puede evitar fácilmente cualquier conflicto.

Espero que esto sirvió de algo.

Answer 3

que usar algo como

application.html.erb ">

show.html.erb

content_for: body_id hacer page_specific_body_id final

Answer 4

@nathanvda: Seguro. ..

Hacemos uso de múltiples archivos de diseño. Así que en nuestro ap p/views/layouts, en lugar de tener sólo application.html.haml (usamos HAML), que en realidad ignoramos el diseño de la aplicación y el uso de diseños personalizados 3:

admin.html.haml (vistas de sección de administración solamente)

registered.html.haml (registrado/suscrito en vistas usuarios únicos)

unregistered.html.haml (no registrada/sin firmar en las vistas de usuarios únicos)

Así que en la parte superior de mi archivo admin.html.haml voy a tener mi enlace de estilos etiquetas a un archivo separado de admin.scss (utilizamos SCSS). Ese manifiesto cargará cualquier sub-hoja de estilos necesaria solo para la sección de administración. Esto nos permite especificar reglas solo para la sección de administración y al mismo tiempo hacer uso de estilos comunes. Por ejemplo, usamos jquery-ui en todo el sitio, por lo que los estilos asociados con jquery-ui se sientan en su propia hoja de estilo y los incluimos en los manifiestos de los 3 archivos de manifiesto css.

Esta solución no proporciona un solo archivo CSS que se pueda almacenar en la memoria caché, pero termina dándole 3 archivos CSS, cada uno de los cuales se puede almacenar en caché. Esto permite una compensación entre el rendimiento y cierta flexibilidad en la organización de las reglas de CSS para que no tengamos que preocuparnos por las colisiones de reglas de CSS.

Answer 5

Tengo un post sobre esto en mi sitio web: Leveraging Rails 3.1, SCSS, and the assets pipeline to differentiate your stylesheets

y echa un vistazo esta respuesta a otra pregunta: Using Rails 3.1 assets pipeline to conditionally use certain css

Espero que esto ayude.

Saludos, Lasse