SASS: randomly pick background-image from a list
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?
Solution 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.