Question

目标：scss（我正在使用v3.2.1）mixin preload就像这样使用（对于任意数量的args＆gt; 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
}

如何在scss中创建多个背景mixin？

1 个答案: