Làm cách nào để sử dụng hình ảnh tham chiếu trong Sass khi sử dụng Rails 3.1?

Question

Tôi có một dự án Rails 3.1 với đường ống nội dung hoạt động tốt. Vấn đề là tôi cần phải tham khảo hình ảnh trong Sass của tôi, nhưng Rails tính toán URL hình ảnh. (Điều này đặc biệt quan trọng trong việc sản xuất, nơi Rails gắn băm Git của ảnh để filename của nó để phá cache.)

Ví dụ, trong app/assets/stylesheets/todos.css.scss:

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

Khi tôi triển khai (hoặc chạy rake assets:precompile) , tệp app/assets/images/tick.png được di chuyển đến public/assets/tick-48fe85c0a.png hoặc tương tự. Điều này phá vỡ CSS. This post làm hai gợi ý:

1. không sử dụng các đường ống dẫn tài sản cho hình ảnh - thay vì đặt chúng trong public/images/ và tham khảo trực tiếp
2. sử dụng ERB cho CSS của bạn và để cho Rails làm việc ra các URL hình ảnh.

Số 1 chắc chắn là một khả năng, mặc dù điều đó có nghĩa là tôi không bị chặn truy xuất bộ nhớ cache trên hình ảnh của mình. Số 2 là vì tôi đang sử dụng Sass chứ không phải ERB để xử lý các tệp.

Answer 1

Sau đây nên làm như lừa:

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

Rails trên thực tế cung cấp một loạt các người giúp đỡ để tham khảo các tài sản:

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

Nói chung

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

ASSET_TYPE có thể là một trong những điều sau: hình ảnh, phông chữ, video, âm thanh, javascript, stylesheet

Answer 2

Biến thể của tùy chọn 2 sẽ hoạt động. Nếu bạn có một cái gì đó như thế này:

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

Và bạn require nó vào tập tin application.css của bạn. Sau đó, pancakes_house đi qua ERB đầu tiên và đầu ra đó đi qua bộ xử lý LESS và bất cứ điều gì đi ra khỏi đó đi vào CSS của bạn. Đặt ERB bên trong SCSS của bạn có thể cảm thấy một chút kỳ lạ nhưng, hey, nó sẽ làm việc và hoàn thành công việc mà không có quá nhiều sự kỳ quặc.

Vì vậy, bạn sẽ có thể nhận được các phương pháp cần thiết để tạo đường dẫn hình ảnh bộ nhớ cache của bạn thông qua ERB.

Tôi chỉ thử tính năng này với ít tệp hơn nhưng nó cũng hoạt động với .css.scss.erb.

---

Là một sang một bên, bạn cũng có thể thêm your own functions to SASS:

phương pháp trong mô-đun này có thể truy cập từ bối cảnh SassScript. Ví dụ: bạn có thể viết

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

và nó sẽ gọi Sass::Script::Functions#hsl.

Thậm chí còn có một số ít hơn instructions on writing your own functions thêm một chút nữa trong hướng dẫn. Tuy nhiên, tôi không chắc chắn làm thế nào để có được Sprockets để tải Sass::Script::Functions bản vá lỗi của bạn vì vậy tôi không thể gọi đây là một giải pháp thực tế; một ai đó với Sprocket mạnh hơn Fu hơn tôi có thể làm cho cách tiếp cận này làm việc mặc dù và tôi muốn gọi điều này thanh lịch hơn ERSS ERSS.

Answer 3

Bạn có thể sử dụng Số 2 một cách dễ dàng, chỉ cần thêm .erb mở rộng .scss tập tin của bạn:

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

và sử dụng asset_path phương pháp để có được đường dẫn đến hình ảnh với băm:

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

tập tin này sẽ được được xử lý bởi erb và sau đó là sass.

Answer 4

đá quý sass-rails định nghĩa các hàm Sass có thể được sử dụng từ Sass, không có xử lý ERB. https://github.com/rails/sass-rails

Answer 5

Đối với những người có lợi cho thời gian tải nhanh hơn cho người dùng, tôi có thể đề xuất theo mẹo Steve Souders để tải hình ảnh trong CSS ở base64.

tài sản dữ liệu url ('path')

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

Answer 6

Khi sử dụng các đường ống dẫn tài sản, đường dẫn đến tài sản phải được viết lại và sass-ray cung cấp người giúp đỡ -URL và -path (có gạch nối trong Sass, nhấn mạnh trong Ruby) cho các lớp nội dung sau: hình ảnh, phông chữ, video, âm thanh, JavaScript và biểu định kiểu.

image-url ("rails.png") trả về url (/assets/rails.png) hình ảnh con đường ("rails.png") trả về "/assets/rails.png"

Càng dạng chung cũng có thể được sử dụng:

asset-url ("rails.png") trả về url (/assets/rails.png) asset-path ("rails.png") trả về "/assets/rails.png "