less.modifyVars的用法

Posted 2021-09-14 Alex_Max

以下内容都是浏览器最终运行的代码，如果是react或者vue的必须是编译之后的文件
html中需要有一些内容

<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>
      window.less = {
        async: false,
        env: "production" //production  development
      };
</script>

<script src="https://cdn.bootcss.com/less.js/2.7.3/less.min.js"></script>

这样在js中就可以直接修改变量了

$(\'#color-switch a\').click(function() {
    var value = $(this).text();
    less.modifyVars({\'@my-color\': value});
    less.refreshStyles();//好像可有可无
});

上面那个color.less文件中必须有这个变量的定义和使用

@my-color:red;
.mydiv{
   color:@my-color;
}

如果less文件中没有这个变量的定义或者没有这个变量的使用，js切换是没有效果的