Как использовать миксин для создания строки из массива неопределенной длины в Scss?

Question

Ответ отсюда работает для предварительной загрузки изображений:

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

Я думаю, что вместо этого position, width и т. Д. Вы также можете использовать display: none.

как мне создать миксин, который принимает массив img urls и производит что-то вроде этого:

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

Я думал о чем-то вроде

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

.

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

Answer 1

Вам нужно @ function , а не @ mixin .Миксины дают одно или несколько правил стиля значения свойства, где функции в sass дают только значение свойства.

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

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