1

I am trying to write a Sass mixin in which I take any number of arguments and produce multiple image backgrounds with CSS (at a variety of different media-resolution breakpoints). Here's what I have (the media query part is working fine, my issue is with adding an indeterminate number of background images):

@mixin pattern-image($image...) {

  background-image: url('../images/patterns/#{$image}.jpg');

  @include media(2x) {
    background-image: url('../images/patterns/#{$image}@2x.jpg');
  }
  @include media(3x) {
    background-image: url('../images/patterns/#{$image}@3x.jpg');
  }
  @include media(4x) {
    background-image: url('../images/patterns/#{$image}@4x.jpg');
  }

}

So then I want to call it like so:

@include pattern-image(one, two, three, four);

And get this as output:

background-image: url('../images/patterns/one.jpg'), url('../images/patterns/two.jpg'), url('../images/patterns/three.jpg'), url('../images/patterns/four.jpg');

@include media(2x) {
  background-image: url('../images/patterns/one@2x.jpg'), url('../images/patterns/two@2x.jpg'), url('../images/patterns/three@2x.jpg'), url('../images/patterns/four@2x.jpg');
}
@include media(3x) {
  background-image: url('../images/patterns/one@3x.jpg'), url('../images/patterns/two@3x.jpg'), url('../images/patterns/three@3x.jpg'), url('../images/patterns/four@3x.jpg');
}
@include media(4x) {
  background-image: url('../images/patterns/one@4x.jpg'), url('../images/patterns/two@4x.jpg'), url('../images/patterns/three@4x.jpg'), url('../images/patterns/four@4x.jpg');
}

But instead, I suppose predictably enough, for each background-image line, I'm getting this instead:

background-image: url("../images/patterns/one, two, three, four.jpg");

Is there a way to expand each variable argument first into a background-image URL, assign that to a variable, and then chain any number to get multiple backgrounds?

I realize I could try to pass the whole URLs in instead (as the variable arguments), but I wanted a faster less repetitive way of calling the mixin.

I don't really see how to use Sass' append function as suggested by a duplicate issue note here, because I'd still need to pass in the whole URL for each background-image, which is what I'm trying to avoid in the first place. Append works for adding values separated by commas or spaces; I do want to do that too, but I also want my mixin to handle the repetition of everything on either side of the interpolated variable here: url('../images/patterns/#{$image}.jpg')

itmustbe
  • 19
  • 3
  • Really? You can't figure out how you might interpolate string before appending it to a list? Alternate duplicate: http://stackoverflow.com/questions/12825039/css-sass-using-each-based-mixins-to-generate-multiple-backgrounds – cimmanon Aug 17 '15 at 20:46

0 Answers0