I am using LESS / Bootstrap on the frontend and PHP on the server-side. I would like to generate different colors (think about rainbow) for a number of different elements on a page, using server-side scripting.
What I would like to do is to create two variables @startcolor
and @endcolor
in PHP and apply a gradient in LESS using those variables. So what I would like to do is something like this:
In HTML:
<div style="@startcolor: rgb(1,2,3); @endcolor: rgb(4,5,6)">...</div>
In LESS:
.buttonBackground(@startcolor, @endcolor);
In CSS it works perfectly, I can just simply override any styling using the style tag. My problem is that so far I found no way to set variables in LESS using inline style tag.
To better understand what I am trying to achieve, have a look at this test page. What I would like to do is to set the background gradients to random colors, just like how I set the text colors now.
If it's not possible using server side techniques, is it possible using JS?