Есть переменная в пути изображений в Sass?

Я хочу иметь одну переменную, содержащую корневой путь ко всем моим изображениям в моем файле CSS. Я не могу понять, возможно ли это в чистом Sass (фактический веб-проект не RoR, поэтому не может использовать asset_pipeline или любой из этих причудливых джазов).

Вот мой пример, который не работает. При компиляции он перехватывает первый экземпляр переменной в фоновом свойстве url, говорящем ("Invalid CSS after "..site/background": expected ")").

Определение функции для возврата пути:

//Vars
$assetPath : "/assets/images";

//Functions
@function get-path-to-assets($assetPath){
  @return $assetPath;
}

Использование функции:

body {
  margin: 0 auto;
  background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0;
  width: 100%; }

Любая помощь будет оценена.

Ответы

Ответ 1

Вы пробовали синтаксис Interpolation?

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;

Ответ 2

Нет необходимости в функции:

$assetPath : "/assets/images";

...

body {
  margin: 0 auto;
  background: url(#{$assetPath}/site/background.jpg) repeat-x fixed 0 0;
  width: 100%; }

Подробнее см. документы для интерполяции.

Ответ 3

Я искал ответ на тот же вопрос, но думаю, что нашел лучшее решение: http://blog.grayghostvisuals.com/compass/image-url/

В принципе, вы можете установить свой путь изображения в config.rb, и вы используете помощник image-url()

Ответ 4

Добавление чего-то к вышеуказанным правильным ответам. Я использую NetBeans IDE, и он показывает ошибку при использовании url(#{$assetPath}/site/background.jpg) этого метода. Это была просто ошибка netbeans и отсутствие ошибки в компиляции sass. Но это форматирование кода ошибки в netbeans и code становится уродливым. Но когда я использую его в кавычках, как показано ниже, он показывает чудо!

url("#{$assetPath}/site/background.jpg")