如何使用mixin从scss中未定义长度的数组创建字符串？答案

【问题标题】：How to use a mixin to create a string from an undefined length array in scss?如何使用mixin从scss中未定义长度的数组创建字符串？
【发布时间】：2019-02-01 16:22:51
【问题描述】：

这里的答案适用于我预加载图像：

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

我认为您也可以使用display: none 来代替position, width 等。

我怎样才能创建一个 mixin，它接受一组 img url 并产生如下内容：

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

【问题讨论】：

标签： sass scss-mixins

【解决方案1】：

你需要的是 @function 而不是 @mixin。 Mixins 提供一个或多个属性值样式规则，而 sass 中的函数仅提供属性的值。

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

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

【讨论】：