web-dev-qa-db-fra.com

Image de fond Sass mixin

Je suis un peu nouveau pour Sass, mais j'essaie de créer un flux de travail pour moi-même. Je génère des "packs de couleurs" pour mes conceptions de thèmes et je dois spécifier les variables suivantes pour mon mixin. Y a-t-il une meilleure manière de faire cela?:

// folder,filename,extension,repeat,x-pos,y-pos
@mixin background ($folder:style1, $img:file, $type:png, $repeat:no-repeat, $x:0, $y:0) {
    background-image: url(./images/#{$folder}/#{$img}.#{$type});
    background-repeat: #{$repeat};
    background-position: #{$x}px #{$y}px;
}

J'insère comme ça:

#nav {
  @include background(style2,myimage,png,repeat-x,10,10);
}

ce qui donne ceci:

#nav {
  background-image: url(./images/style2/myimage.png);
  background-repeat: repeat-x;
  background-position: 10px 10px;
}

Je préfère utiliser le raccourci CSS lorsque cela est possible, mais j'ai rencontré des erreurs avec la sortie. J'apprécierais tout conseil d'expert si ce n'est pas la meilleure façon de le faire.

csshamlsasscompass-sass
19
simplethemes

selon la façon dont vos packs sont structurés/appliqués, vous pourriez être en mesure d'utiliser une boucle pour générer un tas de styles génériques. Voir la documentation ici: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id35

Avez-vous vraiment besoin de 3 composants distincts pour obtenir votre URL d'image? ne serait pas: $img puis en définissant cela sur /folder/img.ext être beaucoup plus facile?

De plus, vous n'avez pas besoin du #{} pour répéter en passant.

J'espère que c'est ce que vous recherchez ... la question n'est pas très précise en termes de ce dont vous avez besoin que le résultat soit réellement.

À la vôtre, Jannis

Mise à jour:

D'accord, je vois que vous avez mis à jour votre question (merci pour cela). Je pense que cela pourrait être un peu mieux pour une utilisation générale:

@mixin background($imgpath,$position:0 0,$repeat: no-repeat) {
    background: {
        image: url($imgpath);
        position: $position;
        repeat: $repeat;
    }
}
.testing {
    @include background('/my/img/path.png');
}

Cela produira alors:

.testing {
  background-image: url("/my/img/path.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}

Ou vous pouvez utiliser la version raccourcie:

@mixin backgroundShorthand($imgpath,$position:0 0,$repeat: no-repeat) {
    background: transparent url(#{$imgpath}) $repeat $position;
}
.testing2 {
    @include backgroundShorthand('/my/img/path.png');
}

Ce qui va générer:

.testing2 {
  background: transparent url(/my/img/path.png) no-repeat 0 0;
}

Enfin si vous souhaitez spécifier séparément votre chemin de base vers votre répertoire d'images vous pouvez faire ce qui suit:

$imagedir:'/static/images/'; // define the base path before the mixin

@mixin backgroundShorthandWithExternalVar($filename,$position:0 0,$repeat: no-repeat) {
    background: transparent url(#{$imagedir}#{$filename}) $repeat $position;
}
.testing3 {
    @include backgroundShorthandWithExternalVar('filename.png');
}

Cela générera alors:

.testing3 {
  background: transparent url(/static/images/filename.png) no-repeat 0 0;
}

C'est ce dont vous aviez besoin?

Sinon, n'hésitez pas à mettre à jour la question ou à répondre/commenter.

31
Jannis

un autre échantillon:

chemin vers l'image:

$path--rel      : "../images";

couleur

$black: #000000;

création du mixin:

@mixin background-image($img, $background-position, $background-color) {
    background-image: url('#{$path--rel}/#{$img}');
    background-repeat: no-repeat;
    background-position: $background-position;
    background-color: $background-color ;
}

en utilisant le mélange:

.navbar-inverse {
  @include background-image("header.png", right, $black); 
}

résultat:

.navbar-inverse {
  background-image: url("../images/header.png");
  background-repeat: no-repeat;
  background-position: right;
  background-color: #000000;
}
4
raduken

prenez un $ var et cela vous facilitera la tâche.

$list: pranav shah

=author-images
  @each $author in $list
.photo-#{$author}
  background: image-url("avatars/#{$author}.png") no-repeat

   .author-bio
+author-images

css

.author-bio .photo-adam {
 background: url('/images/avatars/adam.png') no-repeat;
 }
.author-bio .photo-john {
 background: url('/images/avatars/john.png') no-repeat;
 }
.author-bio .photo-wynn {
 background: url('/images/avatars/wynn.png') no-repeat;
 }
.author-bio .photo-mason {
 background: url('/images/avatars/mason.png') no-repeat;
 }
.author-bio .photo-kuroir {
background: url('/images/avatars/kuroir.png') no-repeat;
}
2
Pranav Shah