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

123

Je veux avoir une variable qui contient le chemin racine de toutes mes images dans mon fichier CSS. Je ne peux pas vraiment comprendre si cela est possible en pure Sass (le projet Web réel n'est pas RoR, donc je ne peux pas utiliser asset_pipeline ou tout ce jazz sophistiqué).

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

Définition de la fonction pour renvoyer le chemin:

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

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

Utilisation de 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.

css sass programme247365
la source

Réponses:

207

Avez-vous essayé la syntaxe d' interpolation ?

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;
Wesley Murch
la source
1
Cela ne fonctionne pas pour moi car CssVariablesProcessor ne traite pas les variables même si elle est définie comme préprocesseur avant CssDataUriPreProcessor
Alexey
1
Fonctionne également dans les chemins entre guillemets, par exemple dans le mixin police-face de la boussole. '#{$fontName}.ext', ..
Fleuv
Oui, il est préférable d'utiliser dans le chemin cité. Sinon, il montre une erreur dans l'EDI netbeans. url ("# {$ get-path-to-assets} /site/background.jpg")
Pons Purushothaman
94

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 la documentation d'interpolation pour plus de détails.

steveax
la source
7
Préférez
certainement
1

Ajouter quelque chose aux bonnes réponses ci-dessus. J'utilise Netbeans IDE et cela montre une erreur lors de l'utilisation de url(#{$assetPath}/site/background.jpg)cette méthode. C'était juste une erreur netbeans et aucune erreur de compilation sass. Mais cette erreur de formatage du code de rupture dans netbeans et le code deviennent moche. Mais quand je l'utilise entre des guillemets comme ci-dessous, cela montre de l'émerveillement!

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

Pons Purushothaman
la source
0

Nous pouvons utiliser un chemin relatif au lieu d'un chemin absolu:

$assetPath: '~src/assets/images/';
$logo-img: '#{$assetPath}logo.png';
@mixin logo {
  background-image: url(#{$logo-img});
}

.logo {
    max-width: 65px;
    @include logo;
 }
Aarji George
la source