Comment utiliser des images de référence dans Sass lorsque j'utilise Rails 3.1 ?

Question

J'ai un projet Rails 3.1 dont le pipeline de ressources fonctionne parfaitement. Le problème est que je dois référencer des images dans mon Sass, mais Rails calcule les URL des images. (Ceci est particulièrement important en production, où Rails ajoute le hash Git de l'image à son nom de fichier pour casser 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. Ce poste fait deux suggestions :

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

Le numéro 1 est certainement une possibilité, bien que cela signifie que je n'obtienne pas de cache-busting sur mes images. Le point 2 est exclu car j'utilise Sass, et non ERB, pour traiter les fichiers.

Answer 1

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'

Le type de ressource peut être l'un des suivants : image, police, vidéo, audio, javascript, feuille de style.

Answer 2

La gemme sass-rails définit des fonctions Sass qui peuvent être utilisées à partir de Sass, sans traitement ERB. https://github.com/rails/sass-rails

Answer 3

Pour ceux qui sont en faveur d'un chargement plus rapide pour les utilisateurs, je suggère de suivre l'astuce de Steve Souders pour charger les images en CSS en base64.

asset-data-url('path')

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

Answer 4

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

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

Et vous require dans votre application.css fichier. Ensuite, pancakes_house passe d'abord par ERB, puis par le processeur LESS et tout ce qui en ressort est intégré à votre CSS. Le fait de placer ERB dans votre SCSS peut sembler un peu étrange, mais cela fonctionnera et permettra d'accomplir le travail sans trop d'inconvénients.

Vous devriez donc être en mesure d'obtenir les méthodes nécessaires pour produire vos chemins d'image de casse-cache à travers votre ERB.

J'ai seulement essayé avec un fichier Less mais cela devrait fonctionner avec .css.scss.erb également.

---

Par ailleurs, vous pouvez également ajouter vos propres fonctions à SASS :

Les méthodes de ce module sont accessibles depuis le 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 des instructions sur l'écriture de vos propres fonctions un peu plus loin dans le manuel. Cependant, je ne suis pas sûr de savoir comment faire pour que Sprockets charge vos Sass::Script::Functions Je ne peux donc pas appeler cela une solution pratique ; quelqu'un avec un Sprocket Fu plus fort que moi pourrait être en mesure de faire fonctionner cette approche et je dirais que c'est plus élégant que le SCSS ERBifié.

Answer 5

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

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

et utiliser asset_path pour obtenir le chemin vers l'image avec un hachage :

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

ce fichier sera traité par erb et ensuite par sass .