How to use a mixin to create a string from an undefined length array in scss?

Question

The answer from here works for me for preloading images:

https://stackoverflow.com/a/14390213/533426

body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url(img01.png) url(img02.png) url(img03.png) url(img04.png);
}

I think instead of this position, width etc you can use display: none as well.

how can I create a mixin that takes an array of img urls and produces something like this:

content:url(img01.png) url(img02.png) url(img03.png) url(img04.png);

I was thinking of something like

@mixin preloadImgs($imgUrls){
  &:after{
    content: @each $imgUrl in imgUrls url('#{$imgUrl}');
    display: none;
  }
}

.

.test{
  @include preloadImgs(['img01.png', 'img02.png', 'img03png']);
}

score 1 · Accepted Answer · answered Feb 01 '19 at 22:54

What you need is @function and not @mixin. Mixins give one or more property-value style rules where as Functions in sass give just the value of a property.

@function getUrls($urls) {
  $allUrls: '';
  @each $url in $urls {
    $allUrls: #{$allUrls url($url)};
  }
  @return $allUrls
}

.class {
  color: getUrls('one' 'two');
}

How to use a mixin to create a string from an undefined length array in scss?

1 Answers1