Jak używać obrazów referencyjnych w Sass podczas korzystania z Rails 3.1?

Mam projekt Rails 3.1 z asset pipeline działa świetnie. Problem polega na tym, że muszę odwoływać się do obrazów w moim Sass, ale Rails oblicza adresy URL obrazów. (Jest to szczególnie ważne w produkcji, gdzie Rails dodaje Git hash obrazu do jego nazwy pliku, aby zniszczyć pamięć podręczną.)

Na przykład w app/assets/stylesheets/todos.css.scss: 

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

Kiedy wdrażam (lub uruchamiam rake assets:precompile), Plik {[3] } jest przenoszony do public/assets/tick-48fe85c0a.png lub czegoś podobnego. To łamie CSS. Ten post tworzy dwa sugestie:

  1. nie używaj potoku zasobów dla obrazów-zamiast tego umieszczaj je w public/images/ i odwoływaj się do nich bezpośrednio
  2. użyj ERB do CSS i pozwól Rails opracować adres URL obrazu.

Liczba 1 jest z pewnością możliwa, chociaż oznacza to, że nie dostaję burzenia pamięci podręcznej na moich zdjęciach. Numer 2 wyszedł, ponieważ używam Sass, a nie ERB do przetwarzania plików.

Author: mu is too short, 2011-06-18
Source

6 answers

To powinno załatwić sprawę:

.button.checkable { background-image: url(image_path('tick.png')); }
Rails w rzeczywistości dostarcza kilku pomocników, którzy odwołują się do zasobów: 
image-url('asset_name')
audio-path('asset_name')

Ogólnie 

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

Asset_type może być jedną z następujących wartości: image, font, video, audio, javascript, stylesheet

 97
Author: Topo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-14 22:04:06

Sass-rails Gem definiuje funkcje Sass, które mogą być używane z Sass, bez przetwarzania ERB. https://github.com/rails/sass-rails

 11
Author: Kliment Mamykin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-09 04:30:09

Dla tych, którzy są za szybszym czasem ładowania dla użytkowników, mogę zasugerować następujące porady Steve Souders ładowanie obrazów w CSS w base64.

Asset-data-url ('Ścieżka')

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

 2
Author: Alex Grande,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-03 16:52:08

Wariant 2 zadziała. Jeśli masz coś takiego: 

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

A Ty require to w Twoim application.css pliku. Następnie pancakes_house najpierw przechodzi przez ERB, a wyjście przechodzi przez procesor LESS I cokolwiek z tego wyjdzie, trafia do twojego CSS. Umieszczenie Erba w SCSS może wydawać się trochę dziwne, ale to zadziała i wykona pracę bez zbytniego dziwactwa.

Więc powinieneś być w stanie uzyskać niezbędne metody do tworzenia ścieżek obrazów buforujących pamięć podręczną przez twój ERB.

Próbowałem tylko z plikiem Less, ale powinien działać również z .css.scss.erb.

Na marginesie, możesz również dodać własne funkcje do SASS :

Metody w tym module są dostępne z kontekstu SassScript. Na przykład możesz napisać 

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

I wywoła Sass::Script::Functions#hsl.

Istnieją nawet instrukcje dotyczące pisania własnych funkcji nieco dalej w instrukcji. Jednak jestem Nie wiem, jak sprawić, by Zębatki załadowały Twoje Sass::Script::Functions łatki, więc nie mogę nazwać tego praktycznym rozwiązaniem; ktoś z mocniejszym zębatką Fu niż ja może być w stanie to podejście zadziałać i nazwałbym to bardziej eleganckim niż ERBified SCSS.

 1
Author: mu is too short,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-18 05:36:34

Możesz łatwo użyć numeru 2, wystarczy dodać rozszerzenie .erb do pliku .scss: 

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

I użyj metody asset_path, Aby uzyskać ścieżkę do obrazu z Hashem: 

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

Ten plik będzie przetwarzany przez erb, a następnie przez sass .

 1
Author: Lev Lukomsky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-21 15:14:00

Podczas korzystania z potoku zasobów, ścieżki do zasobów muszą zostać zapisane ponownie, a Sass-rails udostępnia helpery-url i-path (dzielone w Sass, podkreślone w Ruby) dla następujących klas zasobów: image, font, video, audio, JavaScript i stylesheet.

Image-url ("rails.png") zwraca url (/assets / rails.png) image-path ("rails.png") zwraca " / assets / rails.png "

Bardziej ogólna forma może być również używana:

Asset-url ("rails.png") zwraca url (/assets / rails.png) asset-path ("rails.png") zwraca " / assets / rails.png "

 0
Author: oroyo segun,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-17 23:37:08