使用 scss 随机函数应用随机背景颜色答案

【问题标题】：using scss random function to apply a random background color使用 scss 随机函数应用随机背景颜色
【发布时间】：2018-08-21 21:23:35
【问题描述】：

我已经阅读了多篇关于此的文章，但我无法让它在我有一个颜色列表并且我希望刷新以将其中一种颜色应用为背景图像的情况下工作。

$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 来应用在页面刷新时加载的随机值。

标签： css sass

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我认为这方面的问题是 .scss 编译为 .css。

在这里使用 javascript 似乎更好。像这样（包括 jQuery 代码，但可以很容易地转换为 vanilla）。

$(document).ready(function() {
        $('.boxTitle').css(
  'background-color','#'+ ('000000' + Math.floor(Math.random()*16777215).toString(16)).slice(-6),
);
});

【讨论】：

如果可以轻松转成JS，那何乐而不为呢？顺便说一句，即使问题与 JS 无关

【解决方案3】：

我认为您在创建列表时需要使用方括号：

$colors: ($pink, $green, $greenLight, $yellow, $orange, $orangeLight, $blue, $blueLight, $blueDark);
$colorsText: ($blueDark, $orangeLight, $blueLight, $red, $blueLight, $red, $blueLight, $blue, $pink);

【讨论】：