SASS：从列表中随机选择背景图像

Question

我需要输出：

#footer-widgets .container .row {
    background-image: url("RANDOMLY PICKED");
    background-position: right bottom;
    background-repeat: no-repeat;
}

...并且应该有一个列表，其中包含4或5个指向实际背景图像（http://domain.com/blablabla/image.png）的链接。我怎么能用SASS做到这一点？

Answer 1

最新版本的Sass (v3.3.0)添加了新的random功能。如果将它与图像列表（以及一点变量插值）混合使用，则每次编译Sass时，您将拥有随机选择的背景图像的CSS。例如：

$imgKey: random(5);

$list: apple, banana, cherry, durian, eggplant;
$nth: nth($list, $imgKey);

body {
  background-image: "/images/#{$nth}.jpg";
}

实例：http://sassmeister.com/gist/8966210

如上所述，随机值只会在 Sass编译时发生变化，这不一定是每次访问您的页面时都会发生。