2011-12-22 2 views
89

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

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

ответ

153

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

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

Это не работает для меня, потому что CssVariablesProcessor не обрабатывает переменные, даже если его набор как препроцессор перед CssDataUriPreProcessor – Alexey

+8

Это так красиво, я думаю, m собирается плакать –

+0

Также работает в цитируемых дорожках, например в компас шрифт-face mixin. '' # {$ fontName} .ext ', ..' – Fleuv

69

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

$assetPath : "/assets/images"; 

... 

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

Смотрите interpolation docs для деталей.

+0

Похоже, что @Madmartigan попал туда первым, поэтому я отмечаю его как ответ, хотя ваш и правильный. Благодаря! – program247365

+0

+1 спасибо за примечание по интерполяционным документам – Shanimal

+5

Определенно предпочитаем краткость с указанием непосредственно на переменную –

6

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

В принципе, вы можете настроить свой путь к изображению в config.rb и использовать имиджевую URL() helper

Смежные вопросы