ruby-on-rails - images - sass rails deprecated

¿Cómo gestionar los activos de hojas de estilo CSS en Rails 3.1?

Question

Estoy aprendiendo el nuevo canal de activos en Rails 3.1. Un problema en particular que tengo es la forma en que Sprockets simplemente combina todas las hojas de estilo CSS encontradas en una hoja de estilo masiva. Entiendo por qué esto es ventajoso sobre la combinación manual de hojas de estilo y la reducción para la producción. Pero quiero poder hacer una cascada selectiva de hojas de estilo en lugar de tener todas las reglas todas juntas. Por ejemplo, quiero:

master.css

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

admin.css solo se carga por páginas / vistas dentro de la sección de administración / espacio de nombres.

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

O debe hacerse agregando una clase a las etiquetas del cuerpo en diseños -

clase de cuerpo = "admin"

Y luego las reglas de estilo de destino como sea apropiado. Usando los selectores de alcance SASS, esta podría ser una solución razonable.

Answer 1

@nathanvda: claro ...

Hacemos uso de múltiples archivos de diseño. Así que en nuestra aplicación / vistas / diseños, en lugar de tener solo application.html.haml (usamos HAML), ignoramos el diseño de la aplicación y utilizamos 3 diseños personalizados:

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

registered.html.haml (solo usuarios registrados / registrados en las vistas)

unregistered.html.haml (solo registrado / no registrado en las vistas de los usuarios)

Así que en la parte superior de mi archivo admin.html.haml tendré las etiquetas de enlace de mi hoja de estilo a un manifiesto de admin.scss (usamos SCSS) separado. Ese manifiesto cargará las sub-hojas de estilo necesarias 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 encuentran en su propia hoja de estilo y los incluimos en los manifiestos de los 3 archivos de manifiesto de css.

Esta solución no le proporciona un solo archivo CSS que se puede almacenar en 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, por lo que no tenemos que preocuparnos por las colisiones de reglas de CSS.

Answer 2

Así es como resolví el problema de estilo: (disculpe a Haml)

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

De esta manera comienzo todos los archivos .css.sass específicos de la página con:

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

De esta forma podrás evitar fácilmente cualquier choque.

Espero que esto haya ayudado a algunos.

Answer 3

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 administración y u / es para la vista del usuario. Luego, en el diseño, señalo el application.css apropiado con los activos / u / application.css (js). Poco doloroso tener que mover los archivos generados automáticamente cada vez, pero mucho menos que tener que requerir cada archivo individualmente en el manifiesto.

Answer 4

Tengo una publicación sobre esto en mi sitio web: Aprovechando Rails 3.1, SCSS, y el inventario de activos para diferenciar sus hojas de estilo.

Y echa un vistazo a esta respuesta a otra pregunta: uso de la cartera de activos de Rails 3.1 para usar condicionalmente cierto css

Espero que esto ayude.

Saludos cordiales, Lasse

Answer 5

Yo uso algo como

application.html.erb ">

show.html.erb

content_for: body_id do page_specific_body_id end