Retrieve or set LESS variable from JavaScript?

馋奶兔 提交于 2019-12-01 18:47:39

问题


While testing my web app, I'd like to be able to set the value of one of my LESS @variables using a simple dropdown. (To change the color scheme altogether).

I guess after setting the value, LESS has to reload/recompile the .less files with the new value?

Is there any simple way of accomplishing this? (I'm not running node.js)

The basic example would be something like:

styles.less
@base-color = `window.baseColor()`

回答1:


I think you're doing it in a bit too complicated way ;)

Here's what I propose:

  1. Set a class on your body tag:

    <body class='theme_default'></body>
    
  2. In your .less file define your themes:

    body.theme_default { base_color: #fff; }
    body.theme_gray    { base_color: #ccc; }
    etc..
    
  3. Using jQuery (or just plain JS) change the class of the body tag upon dropdown state change.

That's how I'd do it (and replace the dropdown with some nice widget ;) Cheers



来源:https://stackoverflow.com/questions/8296906/retrieve-or-set-less-variable-from-javascript

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!