如何从动态网站在LESS中设置变量


How to set variables in LESS from a dynamic website?

我在前端使用LESS/Bootstrap,在服务器端使用PHP。我想使用服务器端脚本为页面上的许多不同元素生成不同的颜色(想想彩虹)。

我想做的是在PHP中创建两个变量@startcolor@endcolor,并使用这些变量在LESS中应用梯度。所以我想做的是这样的事情:

在HTML:中

<div style="@startcolor: rgb(1,2,3); @endcolor: rgb(4,5,6)">...</div>

在LESS:

.buttonBackground(@startcolor, @endcolor);

在CSS中,它工作得很好,我可以简单地使用style标记覆盖任何样式。我的问题是,到目前为止,我还没有找到使用内联样式标记在LESS中设置变量的方法。

为了更好地理解我正在努力实现的目标,请查看此测试页。我想做的是将背景渐变设置为随机颜色,就像我现在设置文本颜色一样。

如果无法使用服务器端技术,是否可以使用JS

不,LESS.js只解析stylesheet/less资源文件,所以很明显,您不能在内联中进行解析。