Использование случайной функции scss для применения случайного цвета фона
Я прочитал несколько статей по этому поводу, но я не могу заставить его работать, если у меня есть список цветов, и я хочу обновить один из цветов для применения в качестве фонового изображения.
$red: #fc5545;
$pink: #FCCCD1;
$green: #005E61;
$greenLight: #42BA80;
$yellow: #ffcf6f;
$orange: #F57859;
$orangeLight: #FABD91;
$greyLight: #ebebeb;
$greyDark: #2e2e2e;
$blue: #29A8BF;
$blueLight: #B8E3EB;
$blueDark: #142447;
$colors: $pink, $green, $greenLight, $yellow, $orange, $orangeLight, $blue, $blueLight, $blueDark;
$colorsText: $blueDark, $orangeLight, $blueLight, $red, $blueLight, $red, $blueLight, $blue, $pink;
$key: random( length($colors) );
$nth: nth( $colors, $key );
$nthText: nth( $colorsText, $key );
$random: $nth !default;
$randomText: $nthText !default;
.boxTitle {
background-color: $random;
color: $randomText !important;
}
Каждый раз, когда я обновляюсь, цвет остается прежним.
sass имеет свое место, но вам, скорее всего, понадобится JavaScript для применения случайного значения, загружаемого при обновлении страницы.
Ответы 3
Random вставляет случайные значения только при компиляции Sass, но не при обновлении. Как только css скомпилирован, дело сделано.
От https://blog.codepen.io/2013/08/26/random-function-in-sass/:
Note that the random number that is generated by random() happens when Sass is compiled. When working in the Editor View, that happens pretty regularly: every time you update the Sass code. But when viewing the page in, for instance, Full Page View, we don't re-compile the Sass for each refresh. That is just displaying the CSS that has already been compiled and cached.
Я думаю, что проблема в том, что .scss скомпилирован в .css.
Кажется, здесь лучше использовать javascript. Как это (включает код jQuery, но может быть легко преобразован в ванильный).
$(document).ready(function() {
$('.boxTitle').css(
'background-color','#'+ ('000000' + Math.floor(Math.random()*16777215).toString(16)).slice(-6),
);
});
если его можно легко преобразовать в JS, то почему бы этого не сделать? даже если вопрос, кстати, не имеет отношения к JS
Я думаю, вам нужно использовать скобки при создании списка:
$colors: ($pink, $green, $greenLight, $yellow, $orange, $orangeLight, $blue, $blueLight, $blueDark);
$colorsText: ($blueDark, $orangeLight, $blueLight, $red, $blueLight, $red, $blueLight, $blue, $pink);
проблема с кешем?