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

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

вот мой пример, который не работает. При компиляции он останавливается на первом экземпляре переменной в свойстве background 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%; }

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

4 ответов


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

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

не нужна функция:

$assetPath : "/assets/images";

...

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

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


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

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


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

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