Sass Background Image mixin

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; }