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

我需要输出:

#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?

Stafan泡芙2020/03/24 18:11:49

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时更改,而不一定在每次访问页面时更改