css - 使用 Less 每 0.5s 改变一个变量值

Question

我有一个到处都在使用的全局变量@temp-primary: #ff00ff; 我正在尝试使用 LESS 每 0.5 秒交替一次颜色全局变量。在我的整个网站中，@temp-primary 变量始终分配给 color:。我该怎么做？我知道这可能与 css 动画有关，我只是不知道如何使用 less 来实现这一点。

我得到了

@var: 'Math.random(6)';

@temp-primary: fade(darken(spin(#F0F, @var*156), 15%), 75%);

然而，这只是随机化颜色，并不会不断改变它

Answer 1

我不能肯定地说，但我相信这可能是您问题的解决方案。这不能发表评论，所以我将其添加为答案。

这是 mixin 的链接:http://lesscss.org/features/#mixins-feature

所以我们可以拥有

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
#animation{
   width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example; 
    animation-duration: 4s; 
    animation-name: example;
    animation-duration: 4s;
}

@temp-primary: #animation(); 

应该是可行的。

作为一种替代方法，变量插值可能是您想要用更少的东西来研究的东西。

这是指向另一篇关于类似内容的 SO 帖子的链接。 我希望这会有所帮助。

LESS - Assign mixin to variable and reuse