Случайное фоновое изображение для каждого экземпляра класса

57
5

У меня есть функция sass, которая возвращает случайный url из заданного набора URL-адресов следующим образом:

@function randomUrl(){
$images: (
"/images/watermarks/area-watermark.png",
"/images/watermarks/bar-watermark.png",
"/images/watermarks/line-watermark.png",
$img: nth($images, random(length($images)));
@return $img;
}

и я назначаю его классу следующим образом:

.myClass{
background-image: url(randomUrl());
}

Теперь я хочу получить случайное изображение ДЛЯ КАЖДОГО экземпляра класса, т.е. Если у меня есть 10 div с классом "myClass" в моем HTML, я хочу, чтобы фоновые изображения каждого div были разными. Мой подход до сих пор просто дает мне одно случайное изображение, которое появляется во всех divs каждый раз, когда я компилирую.

спросил(а) 2015-08-04T07:12:00+03:00 5 лет, 1 месяц назад
1
Решение
120

Функция random() выполняет именно то, на что это похоже: генерирует случайное число между двумя указанными числами. Нет никакой гарантии, что числа будут отличаться при каждом вызове функции, потому что это не так, как работает случайное.

Вам нужен способ перетасовать ваш список, но такой функции нет в стандартной библиотеке Sass. Существует несколько сторонних библиотек:

Реализация в обеих библиотеках почти идентична (эта была снята с randomize.scss):

@function shuffle($list) { 
$list-length: length($list);

@while($list-length > 0) {
$rand: random($list-length);
$temp: nth($list, $rand);
$list: set-nth($list, $rand, nth($list, $list-length));
$list: set-nth($list, $list-length, $temp);
$list-length: $list-length - 1;
}

@return $list;
}

Если вы намеренно избегаете повторения списка, вы можете использовать его следующим образом:

@import "SassyLists";

$last-pos: 0;
$images: sl-shuffle(
"/images/watermarks/area-watermark.png"
"/images/watermarks/bar-watermark.png"
"/images/watermarks/line-watermark.png");

@function randomUrl(){
$last-pos: if($last-pos == length($images), 1, $last-pos + 1) !global;
@return nth($images, $last-pos);
}

.myClass {
background-image: url(randomUrl());
}

.myClass {
background-image: url(randomUrl());
}

.myClass {
background-image: url(randomUrl());
}

Вывод:

.myClass {
background-image: url("/images/watermarks/line-watermark.png");
}

.myClass {
background-image: url("/images/watermarks/area-watermark.png");
}

.myClass {
background-image: url("/images/watermarks/bar-watermark.png");
}

Хотя я рекомендую просто использовать итерацию и вырезать использование функции все вместе:

@import "SassyLists";

$images: sl-shuffle(
"/images/watermarks/area-watermark.png"
"/images/watermarks/bar-watermark.png"
"/images/watermarks/line-watermark.png");

@for $i from 1 through length($images) {
.myClass-#{$i} {
background-image: url(nth($images, $i));
}
}

http://sassmeister.com/gist/d0c65d02be52aa31f836

ответил(а) 2015-08-05T17:34:00+03:00 5 лет, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема