2012-02-20 17 views
20

¿Cuál es la forma correcta/carriles/mejores prácticas para llamar a medios específicos (es decir, impresión, pantalla, etc.) css si se usa Rails 3.1 asset Pipeline? Sé que esto se ha preguntado antes, pero todas las soluciones que he visto parecen muy extravagantes y no la elegante solución de Rails que esperaba.Forma correcta de invocar css específicos de medios en la canalización de activos de Rails 3.1

Por lo que yo puedo decir, el enfoque propuesto es la creación de la carpeta de hojas de estilo de la siguiente manera:

assets 
-stylesheets 
--application.css 
--application-print.css 
--print 
---custom-print.css 
--screen 
---custom-screen.css 

el contenido de application.css siendo

/* 
*= require_self 
*= require_tree ./screen 
*/ 

el contenido de aplicación- print.css siendo

/* 
*= require_self 
*= require_tree ./print 
*/ 

y luego incluir lo siguiente en el diseño

<%= stylesheet_link_tag 'application', media = 'screen, projection' %> 
<%= stylesheet_link_tag 'application-print', media = 'print' %> 

OK, hasta ahora todo bien.

PERO, en mi caso custom-print.css se está aplicando en pantalla, y no se está aplicando css a la salida impresa.

Además, este enfoque parece afectar las imágenes llamadas desde css. es decir, en lugar de buscar imágenes en activos/imágenes, ahora busca imágenes en assets/stylesheets/screen. Puede haber algo más sucediendo aquí, ya que parece ser solo javascript css el que se ve afectado. Haré un poco más de comprobación e informaré.

Así que mi pregunta es, ¿cómo se está lidiando con CSS específicos de medios en la cartera de activos de Rails? ¿Qué se considera como una mejor práctica? ¿Y qué estoy haciendo mal?

¡Gracias por su tiempo!

Respuesta

16

El problema es la sintaxis de la llamada al método.

stylesheet_link_tag 'application', :media => 'screen, projection' 
stylesheet_link_tag 'application-print', :media => 'print' 

En su código se asignaban a una variable local llamada media

+0

DOH! ¡gracias! –

+4

También puede usar '@media print {...}' (IE9 +). Además, para la producción puede que necesite agregar 'config.assets.precompile + =% w (application-print.css)' en 'config/production.rb' (como tuve que hacer para Heroku). – manafire

+0

@fullsailor ¿dónde debería ser esto? en 'application.html.erb'? – mmcrae

Cuestiones relacionadas