Question

我有一个sass函数，它返回一组给定url中的随机url，如下所示：

@function randomUrl(){
    $images: (
    "/images/watermarks/area-watermark.png",
    "/images/watermarks/bar-watermark.png",
    "/images/watermarks/line-watermark.png",   
     $img: nth($images, random(length($images)));     
     @return $img;
}

我将它分配给一个类，如下所示：

.myClass{
 background-image: url(randomUrl());
}

我现在想要的是获得一个随机图像 FOR EACH 类实例，即，如果我有10个div与类＆＃34; myClass＆＃34;在我的HTML中，我希望每个div的背景图像都不同。我的方法直到现在才给我一个随机图像，每次编译时都出现在所有div中。

Answer 1

random()函数完全听起来像它：它在2个指定数字之间生成一个随机数。无法保证每次调用函数时数字都会有所不同，因为这不是随机的。

你需要的是一种 shuffle 你的列表的方法，但是在Sass标准库中没有这样的功能。有几个第三方库可以做到：

https://github.com/at-import/SassyLists（sl-shuffle）
https://github.com/mknadler/randomize.scss（shuffle）

两个库中的实现几乎完全相同（这个是从randomize.scss解除的）：

@function shuffle($list) { 
  $list-length: length($list);

  @while($list-length > 0) {
    $rand: random($list-length);
    $temp: nth($list, $rand);
    $list: set-nth($list, $rand, nth($list, $list-length));
    $list: set-nth($list, $list-length, $temp);
    $list-length: $list-length - 1;
  }

  @return $list;
}

如果您故意避免迭代列表，可以像这样使用它：

@import "SassyLists";

$last-pos: 0;
$images: sl-shuffle(
  "/images/watermarks/area-watermark.png"
  "/images/watermarks/bar-watermark.png"
  "/images/watermarks/line-watermark.png");

@function randomUrl(){
  $last-pos: if($last-pos == length($images), 1, $last-pos + 1) !global;
  @return nth($images, $last-pos);
}

.myClass {
  background-image: url(randomUrl());
}

.myClass {
  background-image: url(randomUrl());
}

.myClass {
  background-image: url(randomUrl());
}

输出：

.myClass {
  background-image: url("/images/watermarks/line-watermark.png");
}

.myClass {
  background-image: url("/images/watermarks/area-watermark.png");
}

.myClass {
  background-image: url("/images/watermarks/bar-watermark.png");
}

虽然我建议只使用迭代，然后一起使用该函数：

@import "SassyLists";

$images: sl-shuffle(
  "/images/watermarks/area-watermark.png"
  "/images/watermarks/bar-watermark.png"
  "/images/watermarks/line-watermark.png");

@for $i from 1 through length($images) {
  .myClass-#{$i} {
    background-image: url(nth($images, $i));
  }
}

http://sassmeister.com/gist/d0c65d02be52aa31f836

每个类实例的随机背景图像

1 个答案: