web-dev-qa-db-fra.com

Comment utiliser les images de référence dans Sass avec Rails 3.1?

J'ai un projet Rails 3.1 avec le pipeline d'actifs qui fonctionne très bien. Le problème est que je dois référencer les images dans mon Sass, mais Rails calcule les URL des images. (Ceci est particulièrement important en production, où Rails ajoute le hachage Git de l'image à son nom de fichier pour décomposer les caches.)

Par exemple, dans app/assets/stylesheets/todos.css.scss:

.button.checkable { background-image: url(/assets/tick.png); }

Lorsque je déploie (ou exécute rake assets:precompile), le fichier app/assets/images/tick.png est déplacé vers public/assets/tick-48fe85c0a.png ou quelque chose de similaire. Cela casse le CSS. Cet article fait deux suggestions:

  1. n'utilisez pas le pipeline d'actifs pour les images; mettez-les plutôt dans public/images/ et faites-les référence directement
  2. utilisez ERB pour votre CSS et laissez Rails déterminer l’URL de l’image.

Le numéro 1 est certainement une possibilité, bien que cela signifie que mes images ne volent pas en cache. Le numéro 2 est sorti parce que j'utilise Sass, pas ERB pour traiter les fichiers.

ruby-on-railscssruby-on-rails-3sasssprockets
49
James A. Rosen

Ce qui suit devrait faire l'affaire:

.button.checkable { background-image: url(image_path('tick.png')); }

Rails fournit en fait un ensemble d’aides pour référencer les actifs:

image-url('asset_name')
audio-path('asset_name')

En général

[asset_type]-url('asset_name') #Becomes url('assets/asset_name')
[asset_type]-path('asset_name') #Becomes 'assets/asset_name'

asset_type peut être l'un des éléments suivants: image, police, vidéo, audio, javascript, feuille de style

96
Topo

sass-Rails gem définit les fonctions Sass pouvant être utilisées à partir de Sass, sans traitement ERB https://github.com/Rails/sass-Rails

11
Kliment Mamykin

Pour ceux qui sont favorables à des temps de chargement plus rapides pour les utilisateurs, puis-je suggérer de suivre le conseil de Steve Souders pour charger des images en CSS en base64.

asset-data-url ('path')

https://github.com/Rails/sass-Rails#asset-helpers

2
Alex Grande

Une variante de l'option 2 fonctionnera. Si vous avez quelque chose comme ça:

app/assets/stylesheets/pancakes_house.css.less.erb

Et vous require dans votre fichier application.css. Ensuite, pancakes_house passe par ERB en premier et cette sortie passe par le processeur LESS et tout ce qui en sort est transféré dans votre CSS. Mettre ERB dans votre SCSS peut sembler un peu bizarre, mais bon, ça va marcher et faire le travail sans trop de bizarreries.

Vous devriez donc être en mesure d’obtenir les méthodes nécessaires pour produire vos chemins d’image anti-cache via votre ERB.

Je n’ai essayé cela qu’avec un fichier Less, mais cela devrait également fonctionner avec .css.scss.erb.

En passant, vous pouvez également ajouter vos propres fonctions à SASS :

Les méthodes de ce module sont accessibles à partir du contexte SassScript. Par exemple, vous pouvez écrire 

$color = hsl(120deg, 100%, 50%)

et il appellera Sass::Script::Functions#hsl.

Il y a même des instructions pour écrire vos propres fonctions un peu plus loin dans le manuel. Cependant, je ne sais pas comment faire en sorte que Sprockets charge vos correctifs Sass::Script::Functions, je ne peux donc pas appeler cela une solution pratique; Une personne avec un pignon Fu plus fort que moi pourrait peut-être faire en sorte que cette approche fonctionne et je dirais que cela est plus élégant que le SCSS ERBified.

1
mu is too short

Vous pouvez facilement utiliser le numéro 2, il suffit d’ajouter l’extension .erb à votre fichier .scss:

app/assets/stylesheets/todos.css.scss.erb

et utilisez la méthode asset_path pour obtenir le chemin d'accès à l'image avec hash:

.button.checkable { background-image: url('<%= asset_path 'tick.png' %>'); }

ce fichier sera traité par erb puis par sass .

1
Lev Lukomsky

Lors de l'utilisation du pipeline d'actifs, les chemins d'accès aux actifs doivent être réécrits et sass-Rails fournit des aides -url et -path (composés dans Sass, soulignés en Ruby) pour les classes d'actifs suivantes: image, police, vidéo, audio, JavaScript et feuille de style.

image-url ("Rails.png") renvoie l'URL (/assets/Rails.png) image-path ("Rails.png") renvoie "/assets/Rails.png"

La forme plus générique peut également être utilisée:

asset-url ("Rails.png") renvoie l'URL (/assets/Rails.png) asset-path ("Rails.png") renvoie "/assets/Rails.png"

0
oroyo segun