ruby on rails - images - ¿Cómo uso imágenes de referencia en Sass cuando uso Rails 3.1?
sass ruby on rails (6)
Al usar la canalización de activos, las rutas a los activos deben volver a escribirse y sass-rails proporciona -url y -path helpers (con guiones en Sass, subrayado en Ruby) para las siguientes clases de activos: imagen, fuente, video, audio, JavaScript y hoja de estilo
image-url ("rails.png") devuelve url (/assets/rails.png) image-path ("rails.png") devuelve "/assets/rails.png"
La forma más genérica también se puede usar:
asset-url ("rails.png") devuelve url (/assets/rails.png) asset-path ("rails.png") devuelve "/assets/rails.png"
Tengo un proyecto de Rails 3.1 con el inventario de activos funcionando muy bien. El problema es que necesito hacer referencia a las imágenes en mi Sass, pero Rails calcula las URL de la imagen. (Esto es particularmente importante en producción, donde Rails agrega el hash Git de la imagen a su nombre de archivo para reventar cachés).
Por ejemplo, en app/assets/stylesheets/todos.css.scss :
.button.checkable { background-image: url(/assets/tick.png); }
Cuando despliegue (o ejecute rake assets:precompile ), la app/assets/images/tick.png archivo app/assets/images/tick.png se mueve a public/assets/tick-48fe85c0a.png o algo similar. Esto rompe el CSS. Esta publicación hace dos sugerencias:
- no use la canalización de activos para las imágenes; en su lugar, colóquelas en
public/images/y haga referencia a ellas directamente - use ERB para su CSS y deje que Rails trabaje con la URL de la imagen.
Sin duda, el número 1 es una posibilidad, aunque significa que no obtengo caché en mis imágenes. El número 2 está fuera porque estoy usando Sass, no ERB para procesar los archivos.
La gema sass-rails define las funciones Sass que se pueden utilizar desde Sass, sin procesamiento ERB. https://github.com/rails/sass-rails
Lo siguiente debería hacer el truco:
.button.checkable { background-image: url(image_path(''tick.png'')); }
De hecho, Rails proporciona un conjunto de ayudantes para referenciar los activos:
image-url(''asset_name'')
audio-path(''asset_name'')
En general
[asset_type]-url(''asset_name'') #Becomes url(''assets/asset_name'')
[asset_type]-path(''asset_name'') #Becomes ''assets/asset_name''
tipo_activo puede ser uno de los siguientes: imagen, fuente, video, audio, javascript, hoja de estilo
Para aquellos que están a favor de tiempos de carga más rápidos para los usuarios, sugiero seguir la sugerencia de Steve Souders para cargar imágenes en CSS en base64.
asset-Data-Url (''ruta'')
Puedes usar el Número 2 fácilmente, solo agrega la extensión .erb a tu archivo .scss :
app/assets/stylesheets/todos.css.scss.erb
y use el método asset_path para obtener la ruta a la imagen con hash:
.button.checkable { background-image: url(''<%= asset_path ''tick.png'' %>''); }
este archivo será procesado por erb y luego por sass .
Una variante de la opción 2 funcionará. Si tienes algo como esto:
app/assets/stylesheets/pancakes_house.css.less.erb
Y lo require en su archivo application.css . Luego pancakes_house pasa primero por ERB y esa salida pasa por el procesador LESS y todo lo que sale de eso entra en tu CSS. Poner ERB dentro de su SCSS puede parecer un poco extraño, pero, oye, funcionará y hará el trabajo sin mucha rareza.
Por lo tanto, debería poder obtener los métodos necesarios para generar rutas de imágenes que destruyan la memoria caché a través de su ERB.
Solo intenté esto con un archivo Less pero también debería funcionar con .css.scss.erb .
Como un aparte, también puede agregar sus propias funciones a SASS :
Los métodos de este módulo son accesibles desde el contexto de SassScript. Por ejemplo, puedes escribir
$color = hsl(120deg, 100%, 50%)y llamará a
Sass::Script::Functions#hsl.
Incluso hay algunas instrucciones para escribir sus propias funciones un poco más abajo en el manual. Sin embargo, no estoy seguro de cómo conseguir que Sprockets cargue los parches de Sass::Script::Functions así que no puedo llamar a esto una solución práctica; alguien con un Sprocket Fu más fuerte que yo podría ser capaz de hacer que este enfoque funcione y lo llamaría más elegante que ERSified SCSS.