web-dev-qa-db-fra.com

Vous avez une variable dans le chemin des images dans Sass?

Je veux avoir une variable qui contient le chemin racine de toutes mes images dans mon fichier CSS. Je ne peux pas vraiment savoir si cela est possible dans Sass pur (le projet Web réel n'est pas RoR, donc ne peut pas utiliser asset_pipeline ni aucun de ces jazz de fantaisie).

Voici mon exemple qui ne fonctionne pas. Lors de la compilation, il hésite en première instance de la variable dans la propriété d'url de fond, en disant ("Invalid CSS after "..site/background": expected ")").

Définir la fonction pour renvoyer le chemin:

//Vars
$assetPath : "/assets/images";

//Functions
@function get-path-to-assets($assetPath){
  @return $assetPath;
}

En utilisant la fonction:

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

Toute aide serait appréciée.

csssass
108
program247365

Avez-vous essayé la syntaxe Interpolation ?

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;
192
Wesley Murch

Pas besoin de fonction:

$assetPath : "/assets/images";

...

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

Voir le documents d'interpolation pour plus de détails.

85
steveax

Je cherchais une réponse à la même question, mais je pense avoir trouvé une meilleure solution: http://blog.grayghostvisuals.com/compass/image-url/

En gros, vous pouvez définir votre chemin d’image dans config.rb et utiliser l’aide image-url ()

6
NerdCowboy

Ajouter quelque chose aux réponses correctes ci-dessus. J'utilise netbeans IDE et il montre une erreur en utilisant url(#{$assetPath}/site/background.jpg) cette méthode). C'était juste une erreur netbeans et aucune erreur lors de la compilation sass. Mais cette erreur casse le formatage du code dans netbeans et le code devient laid.

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

0
Pons Purushothaman