Question

我已经阅读了多篇文章，但是我无法在有颜色列表的地方使用它，并且希望刷新以将其中一种颜色用作背景图像。

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

每次刷新时，颜色保持不变。

Answer 1

Random仅在编译Sass时插入随机值，而不在刷新时插入。编译完CSS之后，就完成了。

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

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

Answer 2

我认为问题在于将.scss编译为.css。

在这里使用javascript似乎更好。像这样（包括jQuery代码，但可以轻松地转换为香草）。

*.bar.foo.com

Answer 3

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

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

使用scss random函数应用随机背景色

3 个答案: