css - SASS: randomly pick background-image from a list -
i need output this:
#footer-widgets .container .row { background-image: url("randomly picked"); background-position: right bottom; background-repeat: no-repeat; }
... , there should list 4 or 5 links actual background-images (http://domain.com/blablabla/image.png) pick from. how can sass?
the recent version of sass (v3.3.0) adds new random
function. if mix list of images (and wee bit of variable interpolation), have css randomly selected background image every time sass 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, random value change when sass compiled, won't every time page visited.
Comments
Post a Comment