Есть переменная в пути изображений в 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")