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?

Ответ 1

В последней версии Sass (v3.3.0) добавлена новая функция random. Если вы смешаете это со списком изображений (и небольшой бит переменной интерполяции), вы будете иметь CSS с случайно выбранным фоновым изображением каждый раз, когда Sass будет скомпилирован. Пример:

$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 будет скомпилирован, что не обязательно будет при каждом посещении вашей страницы.