doumie7914
2012-04-06 22:06
浏览 314

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

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?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • duanchi1230 2012-04-06 22:08
    已采纳

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

    已采纳该答案
    打赏 评论

相关推荐 更多相似问题