css - SASS: randomly pick background-image from a list

Question

I need to output this:

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

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

Answer 1

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";
}

Live example: http://sassmeister.com/gist/8966210

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