Problème d'utilisation de variables dans Sass / Compass

LeoLB
Les bases HTML/CSS

Hey , bonjour tout le monde !

Voilà je m'explique : je souhaite créer une feuille de style parfaitement maintenable avec SASS / Compass. Je suis actuellement en train de réfléchir à l'utilisation des images, mais j'ai un petit souci :

/* ========================================================================== */
/* ========================================================================== */
/* IMAGES */
$img_dir : 'img/'; / **Folder Images** /  
$pattern_dir : $img_dir.'/patterns/'; / **Folder Patterns Images** /
$pattern_header : $pattern_dir.'header.png';
$pattern_body : $pattern_dir.'body.png';  

body{
   background:url($pattern_header) repeat-x,url($pattern_body) repeat;*/
}

Je souhaiterais que mon code compilé me rende ceci : 

body{
   background:url('img/patterns/header.png') repeat-x,url('img/patterns/body.png') repeat;*/
}

Mais à la place de cela, Sass me renvoie une erreur !
Que faire ??

3 réponses

Grafikart
Réponse acceptée

"Sass me renvoie une erreur !" Il dit quoi ?
Tu es sûr que la concaténation marche ?

LeoLB
Auteur
Réponse acceptée

J'ai cherché le terme de "concaténation" sur google qui m'a renvoyé quelques articles intéressants sur Sass / Compass donc
1° je n'ai plus besoins du variable $img_dir grâce à la fonction image-url
2° pour afficher une variable il faut faire #{$...}

donc voilà mon nouveau code

$pattern_dir : 'patterns/'; / **Folder Patterns Images** /
body{
   background-image:image-url(#{$pattern_dir}'header.png') repeat-x,image-url(#{$pattern_dir}'body.png') repeat;
}

qui me renvoie : 

body {
  background-image: url('/img/patterns/"header.png"') repeat-x, url('/img/patterns/"body.png"') repeat;
}

mais les "" m'embêtent que faire ???

LeoLB
Auteur
Réponse acceptée

le site du zéro m'a permis de m'aider sur la fin. Voilà ce qu'il fallait faire :

background-image:image-url('#{$pattern_dir}header.png')