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

时间:2013-07-20 15:57:37

标签: variables less

我有一个由随机函数函数定义的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中使用此变量时都会执行该函数 - 导致在网页上使用了许多不同的颜色。

有没有办法逃避这个并在函数定义后将变量转换为字符串?

1 个答案:

答案 0 :(得分:5)

将生成代码包装在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;
}