由函数多次执行定义以下变量的CSS(less css variable defined by fun

我有一个CSS变量由随机函数定义的，我需要这个变量产生从列表中随机背景颜色，我每次进入页面时：

@all-background-colors: "#7B8AA8,#00ADD5,#E93C43,#FC8383";
@background-color: color(~`@{all-background-colors}.split(',')[Math.floor(Math.random()*@{all-background-colors}.split(',').length)]`);

然而似乎功能被执行我在CSS的使用这个变量每一次 - 在整个网页被利用，导致许多不同的颜色。

有没有什么办法逃离这个和变量转换为字符串，一个它是由函数定义之后？

Answer 1:

包裹在一个mixin生成代码，然后调用该MIXIN一次似乎已经解决了这个问题。 所以这：

@all-background-colors: "#7B8AA8,#00ADD5,#E93C43,#FC8383";

.generateColor() { /* define mixin */
@background-color: color(~`@{all-background-colors}.split(',')[Math.floor(Math.random()*@{all-background-colors}.split(',').length)]`);
}
.generateColor(); /* call the mixin which sets the variable once */

.test1 {
  color-fixed: @background-color;
}
.test2 {
  color-fixed: @background-color;
}
.test3 {
  color-fixed: @background-color;
}

这对我来说这产生一致的测试CSS：

.test1 {
  color-fixed: #7b8aa8;
}
.test2 {
  color-fixed: #7b8aa8;
}
.test3 {
  color-fixed: #7b8aa8;
}

文章来源: less css variable defined by function multiple executions