У вас есть переменная в пути к изображениям в 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%; }

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

css sass

— 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;
 }

— Аарджи Джордж
источник