css - 使用 SASS mixin 创建多个背景

我正在尝试在 Sass 中创建一个 mixin 来生成多个背景，问题是背景的数量是未知的，它可以是 3、4 甚至 5。这里我尝试并失败了。

@mixin multiBg($page: index, $sec: sec01,$from: 1, $to: 3, $type: jpg){
    $url: (); // i'm try to create a empty array first
    $newUrl: null; // and an empty variable
    @for $i from $from through $to {
        $newUrl: append($url, url(../img/#{$page}/#{$sec}_bg0#{$i}.#{$type})); // then append value to variable;
    }
    background: $newUrl;
}

#sec05 {
   @include multiBg(index,sec05);
}

电流输出:

background: url(../img/index/sec05_bg03.jpg);

预期输出:

background: url(../img/sec05_bg01.jpg),url(../img/sec05_bg02.jpg), url(../img/sec05_bg03.jpg);

我不知道如何解决这个问题，因为我还在学习 SASS。有人可以启发我吗？

最佳答案

你在正确的轨道上!但是您的语法和逻辑略有偏差。这是我想出的:

@mixin multiBg($page: index, $sec: sec01, $from: 1, $to: 5, $type: jpg) {

  $url_list: ();

  @for $i from $from through $to {

    // I broke constructing the url and adding it to the set into two steps here.
    // We could do this all at once, but separating it can make it easier to read.

    // First, generate the url.
    $url_string: url(../img/#{$page}/#{$sec}_bg0#{$i}.#{$type});

    // Then add it to the list (the 'comma' part is important)
    $url_list: append($url_list, $url_string, comma);
  }

  // Done looping? Output the final list!
  background-image: $url_list;
}

这似乎返回了你正在寻找的东西。这是列表函数上的 official docs - 我总是忘记一两个，可能对你也有用。

另外，既然你提到你是 sass 的新手 - 如果你还没有，请查看 Sassmeister 。这是一个方便的小沙箱，用于快速制作原型(prototype)并在 sass 中进行尝试；类似于 Codepen 但更专业一点。这是我曾经尝试过这个问题的方法。

关于css - 使用 SASS mixin 创建多个背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43860603/