SASS：从列表中随机选择背景图像 [英] SASS: randomly pick background-image from a list

问题描述

我需要输出：

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

... and there should be a list with 4 or 5 links to the actual background-images (http://domain.com/blablabla/image.png) to pick from. How can I do this with SASS?

推荐答案

Sass的最新版本（v3.3.0）添加了一个新的 random 函数。如果你把它和一个图像列表（和可变内插的一小部分）混合，每次编译Sass时，你将有随机选择的背景图像的CSS。示例：

The most recent version of Sass (v3.3.0) adds a new random function. If you mix that with a list of images (and a wee bit of variable interpolation), you will have CSS with a randomly selected background image every time Sass is compiled. Example:

$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已编译，这不一定是您每次访问您的网页时。

As above, the random value will only change when the Sass is compiled, which won't necessarily be every time your page is visited.

这篇关于SASS：从列表中随机选择背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！