list - 如何在 scss 中制作多背景混合？

Question

目标：像这样使用的 scss（我使用的是 v3.2.1）mixin preload（对于任意数量的 args > 0）：

@include preload(url("a.png"), url("b.png"));

输出css：

.preload { background-image: url("a.png"), url("b.png"); }

包括他们之间的那个逗号。一些失败的尝试，它们都产生了减去逗号的输出： 编辑：当然，事实证明我对 mixin 的调用有误，而不是实现中的错误 - 所有三个工作都很好：

@mixin preload($img_urls...) {
  .preload { background-image: $img_urls; }
}

@mixin preload($img_urls...) {
  .preload { background-image: join($img_urls, (), comma); }
}

@mixin preload($img_urls...) {
  $bgs: nth($img_urls, 1);
  @for $n from 2 through length($img_urls) {
    $bgs: $bgs, nth($img_urls, $n); 
  }
  .preload { background-image: $bgs; }
}

Answer 1

你在这里接近了这个：

@mixin preload($img_urls...) {
  .preload { background-image: #{join($img_urls, (), comma)}; } // missing the variable interpolation
}