Javascript 如何将带有参数的.less文件注入less解析器

如何通过创建解析器实例，将带有参数的

.less

文件动态注入less解析器（less.js编译器）

我有不同的主题。用户可以选择任何主题。当用户选择一个主题时，我想在客户端用适当的参数编译相关的

.less

文件

function writeCSS(color,other) {
    var lessCode = '';
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
            var options = {}
            lessCode = xmlhttp.responseText;
            less.render(lessCode, options, function (error, output) {
            if (!error) {
                $("style").append(lessCode.css);
            }
            else document.getElementById('lesscode').innerHTML = '<span style="color:red">' + error + '</span>';
            });
        }
    };
    xmlhttp.open("GET", "/Content/Style.less?baseColorTheme='222222'&otherTheme='222222'&direction='ltr'", true);
    xmlhttp.send();
}

函数写入（颜色、其他）{
var-lessCode=''；
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.status==200&&xmlhttp.readyState==4）{
变量选项={}
lessCode=xmlhttp.responseText；
less.render（lessCode、选项、函数（错误、输出）{
如果（！错误）{
$（“样式”）.append（lessCode.css）；
}
else document.getElementById（'lesscode'）。innerHTML=''+错误+''；
});
}
};
open（“GET”、“/Content/Style.less？baseColorTheme='2222222'”和otherTheme='2222222'&direction='ltr'，true）；
xmlhttp.send（）；
}

主要有两种方法。通常

.less

文件作为“资产管道”的一部分预先编译到CSS。此过程由构建自动化或脚本监督，其细节因语言和工具集而异。选择新主题的用户会将站点的CSS链接更改为预编译的CSS文件。对于jQuery，假设样式表链接如下：

<link id="theme-css" rel="stylesheet" href="theme1.css">

CSS主题变换器的工作示例

但是，如果您不想建立一个资产管道来将较少的文件预编译成等效的CSS，那么您可以在运行中执行几乎相同的操作。诀窍是将

less.js

库作为脚本加载，然后做更多的工作来触发主题的更改：

var newTheme = 'theme2.less';
$('style[id^=less]').remove();
$('#theme-css').attr('href', newTheme);
less.refresh();

第一行和第三行几乎相同。新的第二行是删除CSS样式表所必需的，

less.js

将添加为

.less

资产的编译版本。最后一行手动触发

less.js

运行

一个运行版本的基于较少的主题变换器

---

正如在线Less编译器所展示的那样，您可以获取任意的Less代码并动态编译它。然而，对于主题设置，允许在一组已知的源文件之间切换通常就足够了。这至少减少了在较少的源代码格式不好或不可编译时处理错误情况的需要。

如果您可以共享部分代码，那就太好了。这是我建议的代码示例，带有一些静态参数@TGrif

var newTheme = 'theme2.less';
$('style[id^=less]').remove();
$('#theme-css').attr('href', newTheme);
less.refresh();