2

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?

hyperknot
  • 13,454
  • 24
  • 98
  • 153

1 Answers1

2

No, LESS.js only parses stylesheet/less resource files, so obviously you can't do that inline.

Alix Axel
  • 151,645
  • 95
  • 393
  • 500
  • 1
    I get the impression from this question: http://stackoverflow.com/questions/3175013/load-less-js-rules-dynamically that it's possible but I don't understand how should I integrate "less.refreshStyles()" with my solution. – hyperknot Apr 06 '12 at 22:11
  • @zsero: Didn't knew about that, +1. Either way, you're talking about variables, so even if you could add them to the LESS.js parsing you'd either have to prepend them (and they would be overwritten?) or append them (and they would never be used). – Alix Axel Apr 06 '12 at 22:21
  • @zsero: Anyway, what you're trying to do seems highly unorthodox... Wouldn't you be more comfortable writing (with PHP) those dynamic variables to a LESS [temporary] file? – Alix Axel Apr 06 '12 at 22:24
  • I was thinking just about doing the same. I'll write a php file which outputs a "fake" less file, and I'll just simply use classes in PHP. – hyperknot Apr 06 '12 at 22:30
  • less.refreshStyles() can be called from your jQuery.ready function, but I agree with Alix Axel. Actually I've never used client side less parsing for production. – drinchev Apr 08 '12 at 07:27
  • I'm too blurry eyed and tired, but I think this was covered in another comment above. Php can write any type of file, and define the header type. Thus it can be used to create a less, or css file, then have it treated like a less/css file, and cached as needed. If it's not covered above, google will fill in the details. – David Hobs Aug 13 '12 at 06:17