Rails 3.1を使用している場合、Sassで参照画像を使用するにはどうすればよいですか？

Question

私はRails 3.1プロジェクトを持っており、アセットパイプラインがうまく機能しています。問題はSassの画像を参照する必要があることですが、Railsは画像のURLを計算します。 （これはRailsがキャッシュをバストするために、そのファイル名に画像のGitのハッシュを付加生産において特に重要である。）例えば

、app/assets/stylesheets/todos.css.scssで：

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

I展開（またはrake assets:precompileを実行する）場合ファイルapp/assets/images/tick.pngはpublic/assets/tick-48fe85c0a.pngまたは類似のものに移動されます。これにより、CSSが破損します。 This postは、2つの提案を行います

1. を画像の資産パイプラインを使用していない - 代わりにpublic/images/に入れ、それらをあなたのCSSの直接の
2. 使用ERBを参照すると、Railsが画像URLを仕事しましょう。

数字1は確かに可能ですが、私は自分の画像にキャッシュ・バストすることはできません。 ERCではなくSassを使用しているため、番号2が出力されています。

Answer 1

次は、トリックを行う必要があります：実際に

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

レールの資産を参照するためのヘルパーの束を提供します：一般的な

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

で

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

asset_typeイメージ、フォント、ビデオ、オーディオ、 JavaScriptのスタイルシート

Answer 2

オプション2の変形が有効です。あなたはこのような何かを持っている場合：

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

そして、あなたはあなたのapplication.cssファイルにそれをrequire。その後、pancakes_houseがERBを最初に通過し、その出力がLESSプロセッサを通過し、それから出てくるものがあなたのCSSに入ります。あなたのSCSSの中にERBを置くのはちょっと奇妙な気がするかもしれませんが、ちょっと変わったことなく仕事をしてくれます。

ERBを通じてキャッシュ無効化イメージパスを作成するために必要な方法を知ることができるはずです。

私はLessファイルでこれを試しましたが、.css.scss.erbでも動作するはずです。さておき、あなたもyour own functions to SASSを追加することができますよう

---

：このモジュールの

方法SassScriptコンテキストからアクセス可能です。たとえば、

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

を書くことができ、それがSass::Script::Functions#hslを呼び出します。

マニュアルに少し下にもinstructions on writing your own functionsがあります。しかし、私はあなたのSass::Script::FunctionsパッチをロードするためにSprocketsを入手する方法がわからないので、これを実用的なソリューションと呼ぶことはできません。私よりも強力なSprocket Fuの方がこのアプローチを有効にするかもしれませんが、私はこれをERBified SCSSよりもエレガントに呼んでいます。

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

とハッシュとイメージへのパスを取得するにはasset_pathメソッドを使用します：

Answer 3

あなたは自分の.scssファイルに.erb拡張子を追加し、簡単にナンバー2を使用することができます

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

このファイルはなりますerbによって処理され、次にssassによって処理されます。

Answer 4

sass-rails gemは、ERB処理なしでSassから使用できるSass関数を定義します。 https://github.com/rails/sass-rails

Answer 5

ユーザの読み込み時間が短くて済みますので、Base64のCSSで画像を読み込むためのSteve Soudersのヒントに従ってください。

資産データのURL（「パス」）

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

Answer 6

アセットパイプラインを使用する場合、アセットへのパスが再書き込みされなければならないとSASSレール（ハイフン-urlと-pathヘルパーを提供画像、フォント、ビデオ、オーディオ、JavaScript、およびスタイルシートの各資産クラスについて、Rubyで強調されています。

画像URL（ "rails.png"）は

より "/assets/rails.png" URL（/assets/rails.png） 画像パス（ "rails.png"）リターンを返し

asset-url（ "rails.png"）はurlを返します（/assets/rails.png） asset-path（ "rails.png"）は "/assets/rails.png"を返します。 "