Как использовать эталонные изображения в Sass при использовании Rails 3.1?

Question

У меня есть проект Rails 3.1 с превосходным конвейером ресурсов. Проблема в том, что мне нужно ссылаться на изображения в моем Sass, но Rails рассчитывает URL-адреса изображений. (Это особенно важно в производственной среде, где Rails добавляет к своему имени файла хеш-образ Git для кэширования бюста.)

Например, в app/assets/stylesheets/todos.css.scss:

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

При развертывании (или запуске rake assets:precompile) файл app/assets/images/tick.png перемещается в public/assets/tick-48fe85c0a.png или что-то подобное. Это нарушает CSS. Этот пост дает два предложения:

1. не используйте конвейер ресурсов для изображений - вместо этого поместите их в public/images/ и ссылайтесь на них напрямую
2. используйте ERB для вашего CSS и позвольте Rails обработать URL изображения.

Номер 1, безусловно, возможен, хотя это означает, что я не теряю кеш на своих изображениях. Номер 2 отсутствует, потому что я использую Sass, а не ERB для обработки файлов.

Answer 1

Следующее должно сделать трюк:

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

На самом деле Rails предоставляет кучу помощников для ссылки на активы:

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

В общем

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

asset_type может быть одним из следующих: изображение, шрифт, видео, аудио, javascript, таблица стилей

Answer 2

гем sass-rails определяет функции Sass, которые можно использовать из Sass без обработки ERB. https://github.com/rails/sass-rails

Answer 3

Для тех, кто выступает за более быстрое время загрузки для пользователей, могу ли я предложить следующий совет Стива Соудерса для загрузки изображений в CSS в base64.

активов данных URL ( 'путь')

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

Answer 4

Вы можете легко использовать номер 2, просто добавив расширение .erb в файл .scss:

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

и используйте метод asset_path, чтобы получить путь к изображению с помощью хэша:

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

этот файл будет обработан erb , а затем sass .

Answer 5

Вариант варианта 2 будет работать.Если у вас есть что-то вроде этого:

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

И вы require это в свой файл application.css.Затем pancakes_house сначала проходит через ERB, и этот вывод проходит через процессор LESS, и все, что из этого получается, попадает в ваш CSS.Помещение ERB в ваш SCSS может показаться немного странным, но, эй, это сработает и выполнит работу без особых странностей.

Так что вы должны быть в состоянии найти необходимые методы для создания вашего кеша.перебирая пути к изображениям через ERB.

Я пробовал это только с файлом Less, но он должен работать и с .css.scss.erb.

---

Кроме того, вы также можете добавить ваши собственные функции для SASS :

Методы в этом модуле доступны из контекста SassScript.Например, вы можете написать

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

, и он будет вызывать Sass::Script::Functions#hsl.

Есть даже несколько инструкций по написанию ваших собственных функций немногодалее в руководстве.Однако я не уверен, как заставить Sprockets загружать ваши патчи Sass::Script::Functions, поэтому я не могу назвать это практическим решением;кто-то с более сильным Sprocket Fu, чем я, мог бы заставить этот подход работать, и я бы назвал это более элегантным, чем ERBified SCSS.

Answer 6

При использовании конвейера ресурсов пути к ресурсам должны быть переписаны, а sass-rails предоставляет помощники -url и -path (через дефис в Sass, подчеркнут в Ruby) для следующих классов активов: изображение, шрифт, видео, аудио , JavaScript и таблица стилей.

image-url ("rails.png") возвращает url (/assets/rails.png) image-path ("rails.png") возвращает "/assets/rails.png"

Также можно использовать более общую форму:

asset-url ("rails.png") возвращает url (/assets/rails.png) путь-ресурс ("rails.png") возвращает "/assets/rails.png"