variables - 由函数多次执行定义的较少 css 变量

Question

我有一个由随机函数定义的 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;
}