Sass Background Image mixin - css

Question

I'm kind of new to Sass, but I'm attempting to create a workflow for myself. I generate "color packs" for my theme designs and need to specify the following variables for my mixin. Is there a better way to do this?:
// 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;
}
I'm inserting like so:
#nav {
#include background(style2,myimage,png,repeat-x,10,10);
}
which yields this:
#nav {
background-image: url(./images/style2/myimage.png);
background-repeat: repeat-x;
background-position: 10px 10px;
}
I'd prefer to use CSS shorthand when possible, but I ran into errors with the output. I'd appreciate any expert advice if this is not the best way to do it.

Answer 1

depending on how your packs are structured/applied you might be able to use a loop to generate a bunch of generic styles. See the documentation here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id35
Do you really need 3 separate components to get your image url? wouldn't: $img and then setting that to /folder/img.ext be far easier?
Also, you don't need the #{} for repeat by the way.
I hope this is what you're after… the question is not very specific in terms of what you need the outcome to actually be.
Cheers,
Jannis
Update:
Okay, I see you've updated your question (thanks for that). I believe this could be a little better for general use:
#mixin background($imgpath,$position:0 0,$repeat: no-repeat) {
background: {
image: url($imgpath);
position: $position;
repeat: $repeat;
}
}
.testing {
#include background('/my/img/path.png');
}
This will then output:
.testing {
background-image: url("/my/img/path.png");
background-position: 0 0;
background-repeat: no-repeat;
}
Or you can use the shorthand version:
#mixin backgroundShorthand($imgpath,$position:0 0,$repeat: no-repeat) {
background: transparent url(#{$imgpath}) $repeat $position;
}
.testing2 {
#include backgroundShorthand('/my/img/path.png');
}
Which will generate:
.testing2 {
background: transparent url(/my/img/path.png) no-repeat 0 0;
}
Lastly if you want to specify your base path to your image directory separately you can do the following:
$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');
}
This will then generate:
.testing3 {
background: transparent url(/static/images/filename.png) no-repeat 0 0;
}
Is this what you needed?
If not feel free to update the question or reply/comment.

Answer 2

some other sample:
path to the image:
$path--rel : "../images";
color
$black: #000000;
creating the 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 ;
}
using the mixing:
.navbar-inverse {
#include background-image("header.png", right, $black);
}
result:
.navbar-inverse {
background-image: url("../images/header.png");
background-repeat: no-repeat;
background-position: right;
background-color: #000000;
}

Answer 3

take one $var and it will make it easier for you.
$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;
}