Путь к фоновым изображениям в Sass и Compass

Это указано в файле config.rb

images_dir = "images"

Я использую 2 папки для изображений в своих проектах внутри папки изображений.

images
images/background/
images/content/

Если какие-либо изображения находятся внутри папки images/background/, то как мне добавить путь к изображению в переменные css background и Sass?

$header-img: "sass.gif";

и

background-image: url('sass.gif?1327592426');

И как избавиться от этого автоматически сгенерированного ?1327592426 из каждого фонового изображения?


ruby css sass compass-sass
person Jitendra Vyas    schedule 26.01.2012    source источник

Ответы (1)


arrow_upward
36
arrow_downward

Вам следует использовать image-url помощник URL. Он «генерирует путь к ресурсу, найденному относительно каталога изображений проекта», который вы определили в файле config.rb. Вы также можете установить для третьего параметра $cache-buster значение false, чтобы удалить сгенерированный ?1327592426

Сасс:

// image-url arguments:
// $path: path relative to images directory in config.rb
// $path-only: if true, will cause only the path to be returned instead of a `url()` function
// $cache-buster: When set to `false` no cache buster will be used (i.e. `?313420982`)
$header-img: image-url('background/sass.gif', false, false)
background-image: $header-img

Сгенерированный CSS:

background-image: url('images/background/sass.gif')
person maxbeatty    schedule 27.01.2012
comment
если я использую $header-img: image-url('background/sass.gif', false, true), это дает background-image: url('/images/url('/images/background/sass.gif')'); - person Jitendra Vyas; 27.01.2012
comment
Только что обновил ответ, чтобы было понятнее использование $header-img. Если вы хотите определить background-image в Sass с помощью url(), установите для второго аргумента значение true. Затем вы должны написать background-image: url($header-img) в Sass - person maxbeatty; 27.01.2012
comment
@JitendraVyas, если вы не хотите использовать косую черту «/» в начале пути к изображению, поместите эту строку в файл config.rb: relative_assets = true - person ndequeker; 14.04.2012
comment
@JitendraVyas, чтобы по умолчанию установить для $cache-buster значение false, поместите эту строку в свой config.rb asset_cache_buster :none - person ndequeker; 14.04.2012
comment
Также стоит взглянуть на различные справочники по конфигурации компаса, конкретно images_dir. - person Izhaki; 04.07.2012