本文介绍了从JavaScript中检索或设置LESS变量?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

测试我的网络应用程序时,我想使用一个简单的下拉菜单来设置我的一个LESS @变量的值。 (要更改颜色方案)



我想在设置值后,LESS必须用新值重新加载/重新编译.less文件。



有没有简单的方法来完成这个? (我不运行node.js)



基本示例如下:

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




这里是我的建议:


  1. 在您的正文标签上设置类别:

     < body class ='theme_default'>< / body> 


  2. 在您的.less文件中定义您的主题:

      body.theme_default {base_color:#fff; } 
    body.theme_gray {base_color:#ccc; }
    等..


  3. 使用jQuery


这是我的做法,并将下拉列表一些漂亮的小部件;)
Cheers


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()`
解决方案

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

这篇关于从JavaScript中检索或设置LESS变量?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-27 02:13
查看更多