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

123

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

Вот мой пример, который не работает. При компиляции он блокирует первый экземпляр переменной в свойстве фонового URL-адреса say ( "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%; }

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

program247365
источник

Ответы:

207

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

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;
Уэсли Мерч
источник
1
У меня это не работает, потому что CssVariablesProcessor не обрабатывает переменные, даже если он установлен как препроцессор перед CssDataUriPreProcessor
Алексей
1
Также работает в цитируемых путях, например, в миксине compass font-face. '#{$fontName}.ext', ..
Fleuv
Да, лучше использовать указанный путь. В противном случае он показывает ошибку в IDE netbeans. url ("# {$ get-path-to-assets} /site/background.jpg")
Понс Пурушотаман
94

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

$assetPath : "/assets/images";

...

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

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

steveax
источник
7
Определенно предпочитаю краткость с указанием непосредственно на переменную
skia.heliou
6

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

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

NerdCowboy
источник
1

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

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

Понс Пурушотаман
источник
0

Мы можем использовать относительный путь вместо абсолютного:

$assetPath: '~src/assets/images/';
$logo-img: '#{$assetPath}logo.png';
@mixin logo {
  background-image: url(#{$logo-img});
}

.logo {
    max-width: 65px;
    @include logo;
 }
Аарджи Джордж
источник