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
source

207

Avez-vous essayé la syntaxe d' interpolation ?

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

— Wesley Murch
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
source

7

Préférez

— certainement

6

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 le chemin de votre image dans config.rb et vous utilisez l'assistant image-url ()

— NerdCowboy
source

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