使用 scss 随机函数应用随机背景颜色 [英] using scss random function to apply a random background color

问题描述

我已经阅读了多篇关于此的文章，但是我无法在有颜色列表的情况下使用它，并且我想刷新其中一种颜色以用作背景图像.

I've read multiple articles on this, but I can't make it work where I have a list of colors and I want on refresh for one of the colors to apply as the background image.

$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;
}

每次刷新，颜色都一样.

Everytime I refresh, the color remains the same.

推荐答案

Random 仅在编译 Sass 时插入随机值，而不是在刷新时插入.css编译好了，就大功告成了.

Random only inserts random values when the Sass is compiled, and not on refresh. Once the css is compiled, it's a done deal.

来自 https://blog.codepen.io/2013/08/26/random-function-in-sass/:

请注意，random() 生成的随机数发生在 Sass 编译时.在编辑器视图中工作时，这种情况经常发生:每次更新 Sass 代码时.但是在查看页面时，例如，在 Full Page View 中，我们不会为每次刷新重新编译 Sass.那只是显示已经编译和缓存的 CSS.

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 随机函数应用随机背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！