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

Question

Я хочу иметь одну переменную, которая содержит корневой путь ко всем моим изображениям в моем файле 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%; }

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

Answer 1

Вы пробовали синтаксис Интерполяция ?

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

Answer 2

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

$assetPath : "/assets/images";

...

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

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

Answer 3

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

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

Answer 4

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

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