css - 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时发生变化，不一定每次访问页面时都会发生变化。