2012-01-26 24 views
14

Esto se menciona en el archivo config.rbLas imágenes de fondo en Sass y Compass

images_dir = "images" 

utilizo 2 carpeta para las imágenes en mis proyectos dentro de la carpeta de imágenes

images 
images/background/ 
images/content/ 

Si alguna de las imágenes está en el interior images/background/ carpeta, ¿cómo debería agregar la ruta de acceso a la imagen en css background y las variables de Sass?

$header-img: "sass.gif"; 

y

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

Y la manera de deshacerse de este auto generada ?1327592426 cada imagen de fondo?

Respuesta

33

Debe usar image-urlURL helper. "Genera una ruta a un activo encontrado en relación con el directorio de imágenes del proyecto" que definió en su config.rb. También puede establecer el tercer parámetro $cache-buster a falso para quitar la generada ?1327592426

Sass: CSS

// 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 

Generado:

background-image: url('images/background/sass.gif') 
+1

+1 Gracias por la respuesta. dónde establecer $ cache-buster en falso? –

+0

si uso '$ header-img: image-url ('background/sass.gif', false, true)' da 'background-image: url ('/ images/url ('/images/background/sass. gif ')'); ' –

+0

Acaba de actualizar la respuesta para ser más claro sobre el uso de $ header-img. Si desea definir 'background-image' en su Sass usando' url() ', establezca el segundo argumento en' true'. Luego, escribiría 'background-image: url ($ header-img)' en Sass – maxbeatty

Cuestiones relacionadas