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

Question

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

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

Answer 1

你需要的是@function而不是@mixin。 Mixins 给出一个或多个属性-value 样式规则，而 sass 中的函数仅给出属性.

的值

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

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

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

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

sass

scss-mixins